/* SignASL AI: a shared identity, with a clear first step for learners. */
:root { --paper: #faf9f6; --ink: #202c45; --muted: #637084; --line: #e1e5ec; --pine: #304995; --accent: #bf5738; }
.studio-page { background: radial-gradient(ellipse at 90% 0,#eaf0ff88,transparent 42%),var(--paper); color: var(--ink); }
.studio-page .site-header { min-height: 104px; border-color: #e0e4eb; }
.studio-brand { display: flex; gap: 12px; align-items: center; font-size: 28px; letter-spacing: -1.4px; font-weight: 800; color: #20346d; }
.signasl-logo { width: 48px; height: 48px; border-radius: 15px; box-shadow: 0 5px 12px #253b8315; }
.brand-ai { display: inline-block; vertical-align: middle; margin-left: 7px; padding: 3px 6px; border: 1px solid #becaea; background: #edf1fc; border-radius: 6px; font-size: 12px; line-height: 1.2; letter-spacing: .4px; }
.studio-brand small { display: block; font-size: 8px; letter-spacing: 1.35px; font-weight: 700; margin-top: 1px; color: #6e788e; }
.studio-nav { background: #f0f2f6; border-color: #e2e6ed; }
.studio-nav a { color: #5e6980; }.studio-nav a[aria-current] { color: #253b83; }
.header-about { color: #495974; font-size: 13px; }
.learning-hero { display: grid; grid-template-columns: minmax(0,1fr) 370px; align-items: center; gap: 64px; padding: 42px 0 36px; }
.hero-eyebrow { color: #64748c; font-size: 10px; letter-spacing: 1.65px; font-weight: 800; }
.hero-eyebrow>span { color: #b85536; font-size: 18px; vertical-align: middle; margin-right: 6px; }
.hero-copy h1,.alphabet-welcome h1 { font-size: clamp(44px,4.6vw,64px); line-height: 1.07; letter-spacing: -2.8px; font-weight: 800; margin: 16px 0 18px; }
.hero-copy h1 span,.alphabet-welcome h1 span { color: #304995; }
.hero-copy>p:not(.hero-eyebrow) { max-width: 570px; font-size: 16px; line-height: 1.8; color: #5e6c81; }
.hero-benefits { display: flex; gap: 24px; margin-top: 20px; color: #52657b; font-size: 12px; font-weight: 650; }.hero-benefits span { display: flex; align-items: center; gap: 7px; }.hero-benefits svg { width: 16px; height: 16px; color: #416b65; }
.journey-card { background: radial-gradient(circle at 110% 0,#4d66ae,transparent 60%),#253b83; color: #fff; border-radius: 24px; padding: 24px 28px; box-shadow: 0 12px 28px #253b8317; }
.journey-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.journey-kicker { font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: #d8e4ff; }.journey-spark { width: 27px; height: 27px; color: #ffb880; }
.journey-card h2 { font-size: 25px; font-weight: 750; letter-spacing: -.7px; margin: 8px 0; }.journey-card>p { color: #e0e7fc; font-size: 13px; min-height: 20px; }
.journey-meter { margin: 18px 0; }.journey-meter label { display: block; font-size: 12px; color: #e0e7fc; margin-bottom: 9px; }.journey-meter strong { font-size: 20px; color: white; }
progress { appearance: none; display: block; height: 5px; width: 100%; border: 0; border-radius: 10px; overflow: hidden; background: #e6eaf2; }progress::-webkit-progress-bar { background: #e6eaf2; border-radius: 10px; }progress::-webkit-progress-value { background: #516bb2; border-radius: 10px; }progress::-moz-progress-bar { background: #516bb2; }
.journey-meter progress,.journey-meter progress::-webkit-progress-bar { background: #ffffff30; }.journey-meter progress::-webkit-progress-value { background: #ffb880; }.journey-meter progress::-moz-progress-bar { background: #ffb880; }
.journey-start { width: 100%; min-height: 46px; border: 0; border-radius: 11px; background: #ffd0a9; color: #343149; font-size: 14px; font-weight: 800; }.journey-start:hover { background: #ffe0c7; }
.journey-people { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 10px; color: #e0e7fc; }.portrait-stack { display: flex; padding-left: 4px; }.portrait-stack img { width: 29px; height: 29px; margin-left: -4px; border-radius: 50%; border: 2px solid #253b83; background: #e4e9f4; }
.practice-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 20px; }.practice-section-heading .hero-eyebrow { font-size: 9px; letter-spacing: 1.7px; }.practice-section-heading h2 { font-size: 25px; letter-spacing: -.8px; margin-top: 5px; }.practice-section-heading>p { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #596b80; }.practice-section-heading>p span { color: #a34a31; font-size: 10px; font-weight: 750; }.practice-section-heading i { font-style: normal; color: #c0c7d5; margin: 0 4px; }
.task-panel { border: 1px solid #dfe4ee; box-shadow: 0 8px 24px #253b8305; }.task-tabs { margin: 12px; padding: 4px; background: #f1f3f8; }.task-tabs button { padding: 9px 5px; gap: 6px; font-size: 13px; min-height: 42px; color: #626d82; }.task-tabs .ui-icon { width: 17px; height: 17px; }.task-tabs button[aria-pressed=true] { color: #304995; background: white; }
.learn-panel { padding: 12px 24px 22px; }.practice-select-label { display: block; font-size: 9px; font-weight: 750; letter-spacing: 1.2px; color: #6c7a91; margin-bottom: 8px; }#practice-set { width: 100%; min-height: 44px; border: 1px solid #d9e0eb; border-radius: 9px; background: #fff; padding: 9px; font-size: 14px; color: #405170; }
.learn-panel h2 { margin-top: 24px; font-size: 24px; letter-spacing: -.7px; }.learn-panel>p { font-size: 13px; color: #657289; line-height: 1.7; margin-top: 6px; }
.practice-progress-label { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #657289; margin: 20px 0 9px; }.practice-progress-label>span { font-size: 8px; font-weight: 750; letter-spacing: .8px; }
.practice-steps { display: grid; gap: 5px; margin: 16px 0 18px; }.practice-step { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; min-height: 49px; border: 1px solid transparent; border-radius: 10px; background: #fff; text-align: left; font-size: 16px; font-weight: 650; color: #4d5c74; }.practice-step:hover { background: #f4f6fb; }.practice-step[aria-current=true] { background: #eef2fd; border-color: #d4def7; color: #304995; }.step-number { display: grid; place-items: center; flex: 0 0 26px; height: 26px; background: #f1f3f8; border-radius: 50%; color: #637496; font-size: 11px; }.practice-step[aria-current=true] .step-number { background: #304995; color: white; }.step-state { margin-left: auto; font-size: 9px; font-weight: 500; color: #5b7184; }
.learn-panel .practice-storage { font-size: 11px; color: #68778d; }.learn-panel .practice-note { font-size: 11px; line-height: 1.65; padding-top: 12px; border-top: 1px solid #e8ebf1; margin-top: 14px; }
.studio-page .player-heading { min-height: 100px; }.studio-page .stage { background: radial-gradient(ellipse at 50% 30%,#f9fbff 0,#eef2fa 55%,#e4eaf5 100%); }.studio-page .primary-button,.studio-page .play-button { background: #304995; box-shadow: 0 3px 7px #253b8312; }.studio-page .primary-button:hover,.studio-page .play-button:hover { background: #253b83; }
.studio-page .player-options { background: #fbfcff; }.avatar-trigger { background: #f7f9fe; border-color: #dce3f2; }.studio-page .player-card { border-color: #dfe4ee; }.studio-page .sentence-examples button { background: #fff0e6; color: #965032; }.studio-page .speed-control button.active,.studio-page .loop-button[aria-pressed=true] { background: #edf1fc; color: #304995; }
.practice-coach { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: #fff4e9; border: 1px solid #f0ddc8; border-radius: 16px; padding: 18px 20px; margin-top: 16px; }.coach-heading { display: flex; gap: 12px; align-items: center; flex: 1; min-width: 200px; }.coach-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; background: #f7ddbd; border-radius: 11px; color: #8d5535; }.practice-coach h3 { font-size: 14px; color: #694a36; }.practice-coach p { font-size: 11px; color: #795e4b; margin-top: 4px; line-height: 1.65; }.practice-coach button { background: #fff; border: 1px solid #d7b99c; color: #75482b; border-radius: 10px; padding: 12px 16px; min-height: 46px; font-size: 12px; font-weight: 750; }.practice-coach button:hover { background: #fffaf5; }#practice-status:empty { display: none; }#practice-status { width: 100%; margin: 0; }
.alphabet-welcome { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 42px 0 36px; }.alphabet-welcome h1 { font-size: clamp(40px,4vw,56px); }.alphabet-welcome p:not(.hero-eyebrow) { font-size: 15px; line-height: 1.8; color: #637084; }.alphabet-welcome-note { padding: 20px 30px; border-left: 1px solid #dce2ef; }.alphabet-welcome-note h2 { font-size: 19px; letter-spacing: -.5px; margin: 18px 0 8px; }.letter-art { display: flex; gap: 10px; }.letter-art b { display: grid; place-items: center; width: 48px; height: 54px; border-radius: 12px; font-size: 24px; font-weight: 700; color: #304995; background: #e7edf9; transform: rotate(-8deg); }.letter-art b:nth-child(2) { color: #925334; background: #fce3ce; transform: rotate(5deg); }.letter-art b:nth-child(3) { color: #456e66; background: #dfeee5; transform: rotate(-4deg); }
@media (max-width:1200px) { .learning-hero { gap: 32px; grid-template-columns: minmax(0,1fr) 340px; }.hero-copy h1 { font-size: 54px; }.journey-card { padding: 22px; }.studio-brand { font-size: 25px; }.studio-brand small { font-size: 7px; }.signasl-logo { width: 43px; height: 43px; }.learn-panel { padding: 12px 20px 22px; }.task-tabs button { font-size: 12px; } }
@media (max-width:1000px) { .studio-page .site-header { gap: 20px; }.learning-hero { grid-template-columns: minmax(0,1fr) 310px; gap: 24px; }.hero-copy h1 { font-size: 46px; letter-spacing: -2px; }.hero-copy>p:not(.hero-eyebrow) { font-size: 14px; }.hero-benefits { gap: 14px; font-size: 10px; }.journey-card h2 { font-size: 22px; }.task-tabs button { font-size: 14px; }.practice-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }.practice-coach { padding: 16px; }.alphabet-welcome-note { max-width: 300px; } }
@media (max-width:760px) { .studio-page .site-header { padding-top: 18px; padding-bottom: 16px; gap: 17px; }.studio-brand { font-size: 27px; }.studio-brand small { font-size: 7.5px; }.studio-nav a { font-size: 13px; }.learning-hero { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }.hero-copy h1 { font-size: 47px; letter-spacing: -2px; margin: 14px 0; }.hero-eyebrow { font-size: 8px; letter-spacing: 1.3px; }.hero-copy>p:not(.hero-eyebrow) { font-size: 14px; }.hero-benefits { font-size: 11px; margin-top: 16px; }.journey-card { border-radius: 18px; padding: 20px 22px; }.journey-card h2 { font-size: 24px; }.journey-people { font-size: 11px; }.journey-meter { margin: 14px 0; }.practice-section-heading { align-items: start; margin-bottom: 16px; }.practice-section-heading h2 { font-size: 23px; }.practice-section-heading>p { display: none; }.learn-panel { padding: 12px 20px 20px; }.practice-steps { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }.practice-step { font-size: 14px; padding: 8px; gap: 7px; background: #f7f9fd; }.practice-step .step-state { display: none; }.step-number { flex-basis: 24px; height: 24px; }.task-tabs { margin: 10px; }.task-tabs button { font-size: 12px; min-height: 43px; }.task-tabs .ui-icon { width: 16px; height: 16px; }#practice-set { font-size: 16px; }.practice-coach button { width: 100%; font-size: 14px; }.practice-coach h3 { font-size: 15px; }.practice-coach p { font-size: 12px; }.alphabet-welcome { padding: 28px 0; }.alphabet-welcome h1 { font-size: 43px; letter-spacing: -1.8px; }.alphabet-welcome-note { display: none; }.alphabet-welcome p:not(.hero-eyebrow) { font-size: 14px; } }
@media (max-width:360px) { .hero-copy h1 { font-size: 41px; }.hero-benefits { gap: 12px; font-size: 10px; }.journey-card { padding: 18px; }.journey-people { font-size: 9px; }.task-tabs button { gap: 5px; padding: 8px 4px; }.task-tabs .ui-icon { width: 14px; height: 14px; }.learn-panel { padding: 12px 16px 20px; } }