html, body { max-width: 100%; overflow-x: hidden; }
*, ::before, ::after { box-sizing: border-box; }
img, svg, canvas, video { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }


.hero-view { grid-template-columns: minmax(0px, 0.95fr) minmax(min(100%, 300px), 1fr); align-items: center; }
.hero-copy, .hero-visual, .hero-metrics { min-width: 0px; }
.hero-title-safe { max-width: 100%; font-size: clamp(2.7rem, min(8vw, 10vh), 6.8rem); line-height: 0.96; overflow-wrap: normal; word-break: normal; }
.hero-title-safe .title-line { display: block; max-width: 100%; white-space: nowrap; }
.hero-title-safe .hero-creator-line { margin-top: 0.7rem; color: var(--ink); font-size: clamp(1.4375rem, 0.375em, 2.1875rem); font-weight: 800; line-height: 1.25; letter-spacing: 0.02em; }
.release-badge[hidden] { display: none !important; }

.primary-btn, .ghost-btn, .ticket-btn, .answer-btn, .timeframe-btn, .speed-btn, .level-type-btn, .design-btn { min-height: 44px; scroll-margin-top: 92px; scroll-margin-bottom: 92px; white-space: normal; overflow-wrap: anywhere; text-align: center; }



#resetProgressBtn { color: rgb(180, 35, 24); background: rgba(220, 38, 38, 0.08); border-color: rgb(239, 68, 68); }
#resetProgressBtn:hover, #resetProgressBtn:focus-visible { color: rgb(143, 29, 20); background: rgba(220, 38, 38, 0.16); border-color: rgb(220, 38, 38); }
#resetProgressBtn:active { color: rgb(255, 255, 255); background: rgb(220, 38, 38); border-color: rgb(185, 28, 28); }



body.dark-theme #resetProgressBtn { color: rgb(252, 165, 165); background: rgba(239, 68, 68, 0.14); border-color: rgb(248, 113, 113); }
body.dark-theme #resetProgressBtn:hover, body.dark-theme #resetProgressBtn:focus-visible { color: rgb(254, 226, 226); background: rgba(239, 68, 68, 0.26); border-color: rgb(252, 165, 165); }
body.dark-theme #resetProgressBtn:active { color: rgb(255, 255, 255); background: rgb(220, 38, 38); border-color: rgb(254, 202, 202); }
#ticketsView .tickets-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
#ticketsView .ticket-btn, #ticketsView .ticket-btn strong, #ticketsView .ticket-btn span { overflow-wrap: break-word; word-break: normal; hyphens: none; }
#ticketsView .ticket-btn { text-align: left; }
.question-visual { display: block; width: fit-content; max-width: 100%; }
@media (max-width: 760px) {#ticketsView .study-status { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 6px; margin-bottom: 10px; }
#ticketsView .study-status > div { min-width: 0px; padding: 10px 8px; }
#ticketsView .study-status span { font-size: 0.72rem; line-height: 1.2; }
#ticketsView .study-status strong { margin-top: 2px; font-size: 1.12rem; line-height: 1.15; }
#ticketsView #resetProgressBtn { grid-column: 1 / -1; }
#ticketsView .tickets-grid { grid-template-columns: 1fr; gap: 10px; }}
.question-image-stage { display: inline-flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 100%; }
.question-visual img { width: auto; max-width: 85%; max-height: min(39vh, 476px); height: auto; object-fit: contain; cursor: zoom-in; }
.question-image-zoom-btn { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; padding: 0px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: rgba(15, 23, 42, 0.12) 0px 4px 12px; cursor: zoom-in; }
.question-image-zoom-btn:hover, .question-image-zoom-btn:focus-visible { color: rgb(15, 118, 110); border-color: rgb(20, 184, 166); background: var(--surface-soft); }
.question-image-lightbox { padding: 0px; overflow: visible; background: transparent; border: 0px; }
.question-image-lightbox[open] { display: grid; place-items: center; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0px; }
.question-image-lightbox::backdrop { background: rgba(3, 10, 16, 0.84); backdrop-filter: blur(3px); }
.question-image-lightbox__frame { position: relative; display: grid; place-items: center; width: min(94vw, 1600px); height: min(92dvh, 1100px); padding: 48px 16px 16px; pointer-events: none; }
.question-image-lightbox__image { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(-64px + min(92dvh, 1100px)); object-fit: contain; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.46) 0px 20px 60px; pointer-events: auto; }
.question-image-lightbox__close { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0px; color: rgb(255, 255, 255); background: rgba(15, 23, 42, 0.86); border: 1px solid rgba(255, 255, 255, 0.58); border-radius: 999px; font-size: 28px; line-height: 1; cursor: pointer; pointer-events: auto; }
.question-image-lightbox__close:hover, .question-image-lightbox__close:focus-visible { background: rgb(180, 35, 24); border-color: rgb(254, 202, 202); }
.question-image-lightbox__title { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; }
@media (max-width: 520px) {.question-image-stage { gap: 6px; }
.question-image-zoom-btn { width: 34px; height: 34px; }
.question-image-lightbox__frame { width: 100vw; height: 100dvh; padding: 52px 10px 10px; }
.question-image-lightbox__image { max-height: calc(100dvh - 62px); }}
.answer-btn { grid-template-columns: minmax(34px, 42px) minmax(0px, 1fr); align-items: start; }
.answer-btn > *, .answer-btn span, .answer-btn p { min-width: 0px; overflow-wrap: anywhere; }








.tsw-access-gate { min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.tsw-access-card { width: min(100%, 520px); padding: clamp(16px, 5vw, 24px); }
.tsw-access-card input, .tsw-access-card button { min-height: 44px; }
.tsw-access-status { overflow-wrap: anywhere; }
.tsw-access-badge { right: max(10px, env(safe-area-inset-right)); left: auto; top: max(10px, env(safe-area-inset-top)); bottom: auto; max-width: min(280px, -20px + 100vw); justify-content: space-between; border-radius: 14px; pointer-events: none; }
.tsw-access-badge button { pointer-events: auto; }
@media (max-width: 1100px) {.hero-view { grid-template-columns: 1fr; }
.hero-copy, .hero-visual, .hero-metrics { grid-area: auto; }
.hero-visual { max-width: 720px; }
}
@media (max-width: 760px) {
.tsw-access-badge { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); max-width: none; padding: 6px 8px; font-size: 11px; }
.tsw-access-badge span { max-width: calc(100vw - 110px - env(safe-area-inset-left) - env(safe-area-inset-right)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar, .quiz-header { display: grid; grid-template-columns: 1fr; gap: 12px; }


.hero-title-safe { font-size: clamp(2.55rem, 12vw, 4.2rem); line-height: 0.98; }
.lead { font-size: clamp(1rem, 4.2vw, 1.18rem); }

.question-panel { padding: clamp(16px, 5vw, 24px); }
.answer-btn { padding: 12px; }



}
@media (max-width: 430px) {.hero-title-safe { font-size: clamp(2.25rem, 11.4vw, 3rem); }
.eyebrow { font-size: 0.72rem; }
.release-badge { max-width: 100%; }
.primary-btn, .ghost-btn, .ticket-btn, .answer-btn, .timeframe-btn, .speed-btn, .level-type-btn, .design-btn { min-height: 44px; padding-left: 10px; padding-right: 10px; }
.answer-letter { width: 32px; height: 32px; }
.answer-btn { grid-template-columns: 34px minmax(0px, 1fr); }
}
@media (max-width: 360px) {
.hero-title-safe { font-size: clamp(2.05rem, 10.8vw, 2.55rem); }

.tsw-access-card { border-radius: 14px; }}
@media (orientation: landscape) and (max-height: 480px) {.hero-title-safe { font-size: clamp(2rem, 8.5vh, 3rem); }
.hero-view { gap: 18px; }
.tsw-access-gate { align-items: start; overflow: auto; }
}

.settings-toggle, .help-toggle { top: max(10px, env(safe-area-inset-top)); }
.settings-toggle { right: max(10px, env(safe-area-inset-right)); }
.help-toggle { right: calc(max(10px, env(safe-area-inset-right)) + 54px); }
.tsw-access-badge { left: auto; right: calc(max(10px, env(safe-area-inset-right)) + 112px); top: max(10px, env(safe-area-inset-top)); bottom: auto; width: max-content; max-width: min(320px, calc(100vw - 132px - env(safe-area-inset-left) - env(safe-area-inset-right))); min-width: 0px; pointer-events: none; }
.tsw-access-badge span { flex: 1 1 auto; min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsw-access-badge button { flex: 0 0 auto; pointer-events: auto; }


@media (max-width: 420px) {.settings-toggle, .help-toggle { width: 42px; height: 42px; }
.settings-toggle { right: max(8px, env(safe-area-inset-right)); }
.help-toggle { right: calc(max(8px, env(safe-area-inset-right)) + 50px); }
.tsw-access-badge { right: calc(max(8px, env(safe-area-inset-right)) + 100px); max-width: calc(100vw - 116px - env(safe-area-inset-left) - env(safe-area-inset-right)); padding: 6px 7px; gap: 6px; }
.tsw-access-badge button { padding: 6px 8px; }

}
.tsw-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; border: 0px !important; }
:where(button, [href], input, select, textarea, [tabindex]):focus-visible { outline: rgb(15, 111, 106) solid 3px; outline-offset: 3px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px; }

.ghost-btn:disabled { opacity: 1; color: rgb(111, 127, 131); background: rgb(237, 241, 240); border-style: dashed; cursor: not-allowed; }
body.tsw-dialog-open { overflow: hidden !important; }
@media (max-width: 1100px) {html.tsw-access-granted .app-shell { padding-top: max(64px, calc(env(safe-area-inset-top) + 56px)); }}
@media (max-width: 760px) {.hero-view { align-content: start; gap: 12px; }
.hero-visual { max-height: clamp(84px, 18dvh, 150px); overflow: hidden; }
.hero-visual img { aspect-ratio: 16 / 5; object-fit: cover; object-position: center 44%; }
.hero-title-safe { font-size: clamp(2rem, 10vw, 3.2rem); }
.hero-title-safe .title-line { white-space: normal; overflow-wrap: break-word; }
.hero-title-safe .hero-creator-line { margin-top: 0.45rem; font-size: clamp(1.3125rem, 5.5vw, 1.5625rem); }
.hero-actions { grid-template-columns: repeat(2, minmax(0px, 1fr)); }

}
@media (max-width: 360px) {.hero-actions { grid-template-columns: repeat(2, minmax(0px, 1fr)); }}
@media (max-height: 640px) {html.tsw-access-granted .app-shell { padding-top: max(72px, calc(env(safe-area-inset-top) + 68px)); }
.hero-visual { display: none; }
.hero-view { align-content: start; gap: 10px; }
.hero-title-safe { font-size: clamp(1.9rem, 8.5vh, 2.8rem); line-height: 0.96; }
.hero-copy .eyebrow { display: none; }
.release-badge { min-height: 28px; margin: 4px 0px 6px; padding: 4px 8px; }
#heroLead { display: -webkit-box; margin: 6px 0px 8px; overflow: hidden; font-size: 0.9rem; line-height: 1.25; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }}
@media (min-width: 431px) and (max-height: 640px) {.hero-title-safe { display: grid; grid-template-columns: repeat(2, max-content); justify-content: start; column-gap: 8px; font-size: clamp(1.4rem, 6vh, 1.8rem); line-height: 1; }
.hero-title-safe .title-line { white-space: nowrap; }
.hero-title-safe .hero-creator-line { grid-column: 1 / -1; margin-top: 0px; font-size: 1em; }
#heroLead { -webkit-line-clamp: 3; }}
@media (prefers-reduced-motion: reduce) {html:focus-within { scroll-behavior: auto; }
*, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }}
@media (min-width: 1101px) and (min-height: 641px) {html.tsw-access-granted .app-shell { width: min(1920px, 100% - clamp(32px, 3vw, 64px)); padding-top: clamp(76px, 8vh, 88px); padding-bottom: clamp(16px, 2vh, 24px); }
#homeView.hero-view { min-height: calc(100dvh - clamp(94px, 10vh, 112px)); grid-template-columns: minmax(440px, 0.82fr) minmax(520px, 1.18fr); grid-template-rows: auto auto; gap: clamp(12px, 1.5vh, 18px) clamp(28px, 4vw, 72px); align-content: start; align-items: start; }
#homeView .hero-copy { grid-area: 1 / 1; max-width: none; padding-top: 0px; }
#homeView .hero-title-safe { font-size: clamp(3.55rem, 4.75vw, 5.75rem); line-height: 0.91; }
#homeView .release-badge { min-height: 30px; margin: 10px 0px 12px; padding: 6px 10px; }
#homeView #heroLead { max-width: 56ch; margin: 12px 0px 16px; font-size: clamp(1rem, 1.15vw, 1.18rem); line-height: 1.42; }
#homeView .hero-actions { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; width: 100%; }
#homeView .hero-actions .primary-btn, #homeView .hero-actions .ghost-btn { width: 100%; min-width: 0px; min-height: 44px; padding-right: 10px; padding-left: 10px; font-size: clamp(0.82rem, 1vw, 0.96rem); white-space: nowrap; overflow-wrap: normal; }
#homeView .hero-visual { grid-area: 1 / 2; place-self: start end; width: min(100%, clamp(620px, 46vw, 860px)); aspect-ratio: 16 / 9; margin: 0px; }
#homeView .hero-visual picture, #homeView .hero-visual img { height: 100%; }
#homeView .hero-visual img { aspect-ratio: auto; object-fit: cover; }
#homeView .hero-metrics { grid-area: 2 / 1; align-self: start; margin-top: 0px; }
#homeView .hero-metrics div { padding: 12px 14px; }
#homeView .hero-metrics strong { margin-top: 4px; font-size: 1.8rem; }}