/* Application frame: 190px navigation + fluid content. Content has equal 32px gutters. */
.case-product { position: relative; }
.case-shared-art { position: fixed; z-index: 30; pointer-events: none; overflow: hidden; transform-origin: 0 0; contain: layout paint; }
.case-shared-art > .demo-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.case-action-receipt { position: absolute; inset-inline: 24px; bottom: 22px; z-index: 8; width: fit-content; max-width: calc(100% - 48px); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #18251e; color: #fff; border-radius: 8px; box-shadow: 0 8px 30px #0002; font: 13px/1.5 system-ui,sans-serif; }
.case-receipt-mark { color: #a4d8a0; font-size: 18px; }
.case-action-receipt button { border: 0; background: transparent; color: #d6ecce; font: inherit; cursor: pointer; padding: 6px; white-space: nowrap; }
.suite-record-bridge { margin-top: 32px; padding: 20px 0 0; border-top: 1px solid var(--suite-rule,#dce2dc); font: 13px/1.7 system-ui,sans-serif; }
.suite-record-bridge > span { display: flex; align-items: center; gap: 9px; }
.suite-record-bridge strong { font-weight: 550; }.suite-record-bridge small { margin-inline-start: auto; color: var(--app-muted, #717a72); font-size: 11px; }
.suite-record-bridge p { color: var(--app-muted, #717a72); margin: 9px 0 12px; }.suite-record-bridge .demo-button { min-height: 40px; background: transparent; color: inherit; }
.suite-material-study { margin: 0; }.suite-material-study .demo-art { width: 100%; height: auto; display: block; }.suite-material-study figcaption { padding: 12px 0; font-size: 11px; color: var(--app-muted, #6f695e); letter-spacing: .03em; }
.suite-material-banner { margin: 0 0 32px; position: relative; }.suite-material-banner .demo-art { width: 100%; height: 280px; object-fit: cover; display: block; }.suite-material-banner figcaption { position: absolute; bottom: 16px; left: 16px; padding: 8px 10px; background: #faf8ef; color: var(--app-ink, #34342b); font-size: 10px; letter-spacing: .08em; }
.suite-object-image { overflow: hidden; }.suite-object-image > .demo-art { transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.suite-app [data-demo-action="favorite"][aria-pressed="true"] { color: #aa3b4a; }.suite-app [data-demo-action="favorite"][aria-pressed="true"] svg { fill: currentColor; }
.suite-app .demo-art-photo { background: #e8e7df; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) { .suite-object-image:hover > .demo-art { transform: scale(1.035); } }
@media (max-width:700px) { .case-action-receipt { bottom: 80px; inset-inline: 12px; max-width: calc(100% - 24px); gap: 8px; padding: 10px 12px; font-size: 12px; }.suite-material-banner .demo-art { height: 220px; } }
@media (prefers-reduced-motion:reduce) { .suite-object-image > .demo-art { transition: none; } }
html[data-motion="off"] .suite-object-image > .demo-art { transition: none; transform: none; }
.case-product[data-mode="app"] { height: 100%; min-height: 100%; }
.suite-app { --suite-muted: #626b65; --suite-rule: #e7ebe7; --suite-surface: #f5f7f3; --chart-1: var(--demo-accent); --grid: #e4e8e4; --axis-ink: #626b65; --ink: var(--demo-ink); height: 100%; min-height: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: 72px minmax(0, 1fr); color: var(--demo-ink); background: #fff; }
.suite-app button, .suite-admin-shell button { cursor: pointer; }
.suite-app button:disabled, .suite-admin-shell button:disabled { cursor: default; opacity: .6; }
.suite-app :is(button, input, select, textarea):focus-visible, .suite-admin-shell :is(button, input, select, textarea):focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 3px; }
.suite-app-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 28px; border-bottom: 1px solid var(--suite-rule); }
.suite-wordmark { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
.suite-wordmark b { font-size: 32px; font-weight: 400; }
.suite-wordmark .demo-icon { width: 26px; height: 26px; }
.suite-app-header > div { display: flex; gap: 16px; align-items: center; }
.suite-app-header .demo-button { border: 0; min-width: 40px; padding: 8px; background: transparent; color: inherit; }
.suite-avatar { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--app-panel, #e9ece6); color: #3f5642; font-size: 14px; font-weight: 500; }
.suite-avatar.tone-1 { background: #e6ecf0; color: #385267; }.suite-avatar.tone-2 { background: #f1e6e8; color: #794957; }.suite-avatar.tone-3 { background: #eee9dc; color: #6b5d39; }
.suite-app-nav { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 24px 14px; border-inline-end: 1px solid var(--suite-rule); background: #f8faf7; }
.suite-app-nav button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 14px; background: transparent; border: 0; color: #616b64; border-radius: 6px; text-align: start; font-size: 13px; }
.suite-app-nav button[aria-current] { background: var(--app-panel, #e9ede7); color: #173c29; font-weight: 500; }
.suite-app-nav button:hover { color: var(--demo-ink); }
.suite-app-main { grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-behavior: auto; scrollbar-width: thin; }
.suite-app-content { max-width: 1184px; padding: 28px 32px 48px; margin-inline: auto; }
.suite-page-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.suite-page-title h3 { margin: 0; font-size: 26px; line-height: 1.35; font-weight: 600; letter-spacing: -.025em; overflow-wrap: anywhere; }
.suite-page-title p { margin: 8px 0 0; color: var(--app-muted, #626b65); font-size: 13px; line-height: 1.6; }
.suite-page-title .demo-button { flex: none; min-height: 38px; font-size: 12px; }
.suite-section { min-width: 0; margin-top: 28px; }
.suite-section > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.suite-section > header h4 { font-size: 17px; font-weight: 600; line-height: 1.5; }
.suite-section > header .demo-button { min-height: 32px; padding: 4px 0; border: 0; background: transparent; color: inherit; font-size: 12px; }
.suite-two-col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.suite-two-col > .suite-section { margin-top: 24px; }
.suite-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; padding: 22px 0; margin: 20px 0; border-block: 1px solid var(--app-rule, #e7ebe7); }
.suite-stats > div { min-width: 0; padding-inline: 20px; border-inline-end: 1px solid var(--app-rule, #e7ebe7); }.suite-stats > div:first-child { padding-inline-start: 0; }.suite-stats > div:last-child { padding-inline-end: 0; border: 0; }
.suite-stats dt { margin-bottom: 10px; font-size: 12px; color: var(--app-muted, #626b65); }.suite-stats dd { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }.suite-stats small { margin-inline-start: 5px; color: var(--app-muted, #626b65); font-size: 12px; }
.suite-progress { min-width: 90px; }.suite-progress > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; }.suite-progress bdi { font-variant-numeric: tabular-nums; white-space: nowrap; }.suite-progress > span { display: block; height: 5px; background: var(--app-panel, #e7ece4); overflow: hidden; border-radius: 9px; }.suite-progress > span > i { display: block; height: 100%; background: var(--demo-accent); border-radius: inherit; }
.suite-tag { display: inline-flex; flex: none; align-items: center; align-self: center; min-height: 23px; padding: 2px 8px; background: var(--app-panel, #f0f2ef); color: var(--app-muted, #626b65); font-size: 11px; line-height: 1.5; border-radius: 4px; white-space: nowrap; }.suite-tag.is-active { color: #235939; background: #e7f1e9; }
.suite-note { color: var(--app-muted, #626b65); font-size: 12px; line-height: 1.8; margin-top: 12px !important; }.suite-feedback { padding: 12px 16px; margin-top: 24px !important; background: var(--demo-tint); border-inline-start: 2px solid var(--demo-accent); font-size: 13px; color: var(--demo-ink); overflow-wrap: anywhere; }
.suite-empty { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 100px; padding: 24px; background: var(--app-panel, #f5f7f3); color: var(--app-muted, #626b65); font-size: 14px; grid-column: 1 / -1; }.suite-empty .demo-icon { flex: none; width: 24px; height: 24px; }
.suite-overline { color: var(--app-muted, #626b65); font-size: 12px; }.suite-inline-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.suite-filters { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 0 24px; }.suite-search { display: flex; align-items: center; gap: 10px; max-width: 540px; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--app-rule, #d7ded7); border-radius: 6px; color: var(--app-muted, #626b65); background: #fff; }.suite-search .demo-icon { flex: none; }.suite-search input { width: 100%; min-width: 0; padding: 2px; border: 0; background: transparent; outline-offset: 5px; color: var(--app-ink, #24382c); font-size: 14px; }
.suite-filter-chips { display: flex; align-items: center; gap: 8px; overflow: auto; padding: 2px; scrollbar-width: none; }.suite-filter-chips button { flex: none; padding: 8px 14px; min-height: 38px; border: 1px solid var(--app-rule, #e1e6df); border-radius: 5px; background: transparent; color: var(--app-muted, #626b65); font-size: 12px; }.suite-filter-chips button[aria-pressed="true"] { border-color: #233c2b; background: var(--app-panel, #f0f3ed); color: #233c2b; }
.suite-object-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }.suite-object { min-width: 0; display: flex; flex-direction: column; }.suite-object-image { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; background: #f3f4ef; border-radius: 7px; }.suite-object-image > .demo-art { width: 100%; height: 190px; object-fit: cover; transition: transform .45s var(--ease); }.suite-object-image:hover > .demo-art { transform: scale(1.035); }.suite-object-image > span { position: absolute; bottom: 12px; left: 12px; padding: 4px 8px; background: #fff; color: #473b39; border-radius: 4px; font-size: 12px; }
.suite-object-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }.suite-object h4 { font-size: 17px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }.suite-object h4 small { color: var(--app-muted, #626b65); margin-inline-start: 8px; font-size: 14px; }.suite-object > p { margin-top: 5px; color: var(--app-muted, #626b65); font-size: 12px; }.suite-object footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; font-size: 12px; }.suite-object footer > span { font-variant-numeric: tabular-nums; }.suite-object footer .demo-button { min-height: 34px; padding: 5px 0; border: 0; background: transparent; color: inherit; font-size: 12px; }
.suite-learning-hero { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: stretch; padding: 30px; background: #0d4936; color: #f3efd9; border-radius: 10px; }.suite-learning-hero > div { display: flex; flex-direction: column; align-items: start; }.suite-learning-hero > div > span { color: #c7d7c9; font-size: 12px; }.suite-learning-hero h3 { margin: 16px 0 10px; font-size: 30px; line-height: 1.5; }.suite-learning-hero p { color: #d3dfd2; font-size: 14px; line-height: 1.8; }.suite-learning-hero .demo-button { margin: 20px 0; background: #dbc276; color: #183d2d; border: 0; }.suite-learning-hero .demo-art { height: 260px; width: 100%; object-fit: cover; border-radius: 5px; }.suite-learning-hero .suite-progress { width: 100%; margin-top: auto; }.suite-learning-hero .suite-progress > span { background: #3b6a52; }.suite-learning-hero .suite-progress i { background: #dbc276; }
.suite-path { list-style: none; margin: 0; padding: 0; }.suite-path li { display: flex; align-items: center; gap: 14px; min-height: 82px; padding: 12px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-path li > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--app-panel, #f0f3e9); font-size: 13px; }.suite-path li > div { flex: 1; }.suite-path strong { font-size: 15px; font-weight: 500; }.suite-path p { color: var(--app-muted, #626b65); font-size: 12px; margin-top: 5px; }
.suite-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding: 22px 0; }.suite-week > div { display: flex; align-items: center; flex-direction: column; gap: 12px; font-size: 11px; color: var(--app-muted, #626b65); }.suite-week b { font-size: 16px; font-weight: 400; color: var(--app-ink, #273d2c); }.suite-week i { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--app-rule, #e0e6dc); border-radius: 50%; font-style: normal; }.suite-week i.is-today { border-color: #1a6141; color: #1a6141; }.suite-week i.is-done { background: #1a6141; color: #fff; border: 0; }
.suite-progress-list article { display: grid; grid-template-columns: minmax(0, 1fr) 100px auto; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-progress-list article > div > strong { display: block; font-weight: 500; font-size: 14px; }.suite-progress-list article > div > span { display: block; margin-top: 5px; color: var(--app-muted, #626b65); font-size: 12px; }.suite-progress-list .demo-button { font-size: 12px; padding: 6px 0; border: 0; }.suite-large-number { display: block; font-size: 30px; font-weight: 400; }.suite-large-number small { font-size: 14px; }
.suite-classroom { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }.suite-classroom > aside { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; }.suite-classroom > aside > span { margin-bottom: 8px; font-size: 13px; color: var(--app-muted, #626b65); }.suite-classroom > aside > button { display: flex; align-items: center; gap: 12px; padding: 14px 10px; border: 0; background: #f4f6f0; color: #324b38; font-size: 13px; text-align: start; border-radius: 5px; }.suite-classroom > aside button[aria-pressed="true"] { background: #e6edde; }.suite-classroom > aside button > b { font-size: 14px; font-weight: 400; }.suite-classroom > aside button small { display: block; color: var(--app-muted, #626b65); font-size: 12px; margin-top: 4px; }.suite-classroom .suite-progress { margin: 14px 0; }.suite-lesson-image { position: relative; margin-bottom: 24px; }.suite-lesson-image .demo-art { height: 210px; width: 100%; object-fit: cover; border-radius: 6px; }.suite-lesson-image > span { position: absolute; bottom: 12px; inset-inline-start: 12px; padding: 4px 10px; background: #fff; color: #25402c; font-size: 12px; }
.suite-lesson-body h4 { font-size: 24px; margin: 12px 0; }.suite-lesson-body > p { font-size: 17px; line-height: 2; }.suite-lesson-body blockquote { padding: 20px; margin: 24px 0; border-inline-start: 3px solid #b29648; background: #f5f5ed; font-size: 20px; line-height: 1.8; }.suite-lesson-body h5 { font-size: 16px; margin: 24px 0 12px; }.suite-vocabulary > div { display: grid; grid-template-columns: 1fr .8fr 1.5fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); font-size: 14px; }.suite-vocabulary strong { font-weight: 500; }.suite-vocabulary span { color: var(--app-muted, #626b65); }.suite-quiz { margin: 26px 0; padding: 20px; background: #f6f8f2; }.suite-quiz h5 { margin-top: 0; }.suite-quiz > p { font-size: 14px; margin: 12px 0; }.suite-quiz label { display: flex; align-items: center; gap: 10px; min-height: 42px; font-size: 15px; }.suite-quiz input { accent-color: #205c3a; }.suite-quiz .demo-button { margin-top: 12px; }.suite-classroom-footer { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.suite-fitness-hero { display: grid; grid-template-columns: 1fr 1fr; background: #d2ef57; color: #161d0a; }.suite-fitness-hero > div { padding: 30px; }.suite-fitness-hero span { font-size: 12px; }.suite-fitness-hero h3 { margin: 22px 0 14px; font-size: 32px; line-height: 1.2; font-weight: 600; }.suite-fitness-hero p { font-size: 13px; line-height: 1.7; }.suite-fitness-hero .demo-button { margin-top: 22px; background: #152008; color: #fff; }.suite-fitness-hero .demo-art { height: 330px; width: 100%; object-fit: cover; object-position: 74% top; }
.suite-schedule { display: grid; grid-template-columns: 1fr; }.suite-schedule article { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-schedule article > div:first-child { display: flex; flex-direction: column; align-items: center; gap: 4px; border-inline-end: 1px solid var(--app-rule, #e7ebe7); }.suite-schedule span { display: block; font-size: 12px; color: var(--app-muted, #626b65); }.suite-schedule b { font-size: 22px; font-weight: 400; }.suite-schedule strong { font-size: 14px; font-weight: 500; }.suite-schedule strong + span { margin-top: 6px; }
.suite-training-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.suite-training-grid article { display: grid; grid-template-columns: 120px minmax(0, 1fr); background: #f6f8f0; }.suite-training-grid .demo-art { height: 100%; min-height: 180px; object-fit: cover; object-position: 75% top; }.suite-training-grid article > div { padding: 18px; }.suite-training-grid article span, .suite-training-grid p { font-size: 12px; color: var(--app-muted, #626b65); }.suite-training-grid h4 { margin: 10px 0; font-size: 18px; line-height: 1.4; }.suite-training-grid .demo-button { font-size: 12px; border: 0; padding-inline: 0; margin-top: 12px; background: transparent; }
.suite-workout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }.suite-workout-media { position: relative; }.suite-workout-media .demo-art { width: 100%; height: 520px; object-fit: cover; object-position: 75% top; }.suite-workout-media > span { position: absolute; bottom: 20px; left: 20px; background: #d2ef57; color: #1e2908; padding: 8px 12px; font-size: 12px; }.suite-workout-console > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-workout-console > h4 { margin: 12px 0; font-size: 25px; }.suite-workout-console > p { color: var(--app-muted, #626b65); line-height: 1.8; }.suite-timer { display: block; font-size: 40px; font-weight: 400; font-variant-numeric: tabular-nums; margin: 20px 0; }.suite-workout-console > div { display: flex; gap: 12px; }.suite-workout-console > .suite-progress { display: block; margin: 24px 0; }.suite-workout-console .suite-exercise-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }.suite-exercise-steps > button { display: flex; align-items: center; gap: 14px; padding: 12px; text-align: start; border: 1px solid var(--app-rule, #e7ebe7); background: #fff; border-radius: 5px; color: #243b2b; }.suite-exercise-steps > button[aria-pressed="true"] { border-color: #52692b; background: #f6faeb; }.suite-exercise-steps b { font-size: 14px; font-weight: 400; }.suite-exercise-steps strong { font-size: 14px; font-weight: 500; }.suite-exercise-steps small { display: block; color: var(--app-muted, #626b65); font-size: 12px; margin-top: 5px; }
.suite-instruction-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }.suite-instruction-grid h5 { font-size: 14px; font-weight: 500; }.suite-instruction-grid p { color: var(--app-muted, #626b65); font-size: 13px; line-height: 1.9; margin-top: 10px; }
.suite-brand-intro > span { font-size: 11px; letter-spacing: .05em; }.suite-brand-intro h3 { margin: 24px 0 16px; font-size: 36px; line-height: 1.1; letter-spacing: -.03em; font-weight: 500; }.suite-brand-intro p { color: var(--app-muted, #626b65); max-width: 420px; font-size: 14px; line-height: 1.7; }.suite-brand-feature { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; margin-top: 28px; background: #f2f0e9; }.suite-brand-feature .demo-art { width: 100%; height: 340px; object-fit: cover; }.suite-brand-feature > div { padding: 32px; }.suite-brand-feature span { font-size: 12px; color: var(--app-muted, #655f55); }.suite-brand-feature h4 { font-size: 28px; margin: 20px 0 14px; font-weight: 500; }.suite-brand-feature p { font-size: 14px; line-height: 1.9; color: var(--app-muted, #655f55); }.suite-brand-feature .demo-button { margin-top: 22px; border: 0; border-radius: 0; background: #181817; color: #fff; }
.suite-material-samples { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }.suite-material-samples > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-material-samples i { display: block; height: 75px; margin-bottom: 10px; }.material-0 { background: #b89a6d; }.material-1 { background: #d0c2a7; }.material-2 { background: #c8c7bc; }.material-3 { background: #5e605a; }
.suite-project-summary h4 { margin: 14px 0; font-size: 20px; }.suite-project-summary > span, .suite-project-summary p { color: var(--app-muted, #626b65); font-size: 13px; line-height: 1.8; }.suite-project-summary .demo-button { margin-top: 16px; }.suite-projects > article { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-projects .demo-art { width: 100%; height: 250px; object-fit: cover; }.suite-projects header { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--app-muted, #626b65); }.suite-projects h4 { margin: 14px 0; font-size: 22px; font-weight: 500; }.suite-projects p { color: var(--app-muted, #626b65); line-height: 1.8; font-size: 14px; }.suite-projects blockquote { padding: 14px 16px; margin: 12px 0; background: var(--app-panel, #f3f4f0); font-size: 13px; line-height: 1.8; }
.suite-timeline { display: flex; gap: 0; list-style: none; padding: 0; margin: 20px 0; }.suite-timeline li { flex: 1; position: relative; padding-top: 18px; padding-inline-end: 12px; font-size: 11px; color: var(--app-muted, #626b65); line-height: 1.7; }.suite-timeline li::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; background: var(--app-panel, #e1e6df); }.suite-timeline li.is-done::before { background: #385b41; }
.suite-material-library { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }.suite-material-plane { height: 200px; margin-bottom: 18px; }.suite-material-library article > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-material-library h4 { font-size: 22px; margin: 8px 0 12px; }.suite-material-library p { font-size: 13px; color: var(--app-muted, #626b65); line-height: 1.8; }.suite-material-library .demo-button { margin-top: 16px; }.suite-selected-material { padding: 24px; background: var(--app-panel, #f5f4ef); }.suite-selected-material > strong { font-size: 20px; font-weight: 500; }.suite-selected-material > p { margin: 12px 0 20px; font-size: 14px; color: var(--app-muted, #626b65); }
.suite-brand-detail, .suite-product-detail, .suite-profile-detail, .suite-music-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; }.suite-brand-gallery > .demo-art { width: 100%; height: 300px; object-fit: cover; margin-bottom: 16px; }.suite-brand-detail > section > span, .suite-product-detail > section > span, .suite-profile-detail > section > span, .suite-music-detail > section > span { color: var(--app-muted, #626b65); font-size: 12px; }.suite-brand-detail h3, .suite-product-detail h3, .suite-profile-detail h3, .suite-music-detail h3 { font-size: 30px; font-weight: 500; margin: 14px 0; }.suite-brand-detail p, .suite-product-detail > section > p, .suite-profile-detail > section > p, .suite-music-detail > section > p { color: var(--app-muted, #626b65); font-size: 14px; line-height: 1.9; }.suite-brand-detail h5, .suite-profile-detail h5 { font-size: 14px; margin: 24px 0 14px; }.suite-brand-detail > section > .demo-button { margin: 20px 8px 0 0; }
.suite-specs { margin: 20px 0; }.suite-specs > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); font-size: 13px; }.suite-specs dt { color: var(--app-muted, #626b65); }.suite-specs dd { text-align: end; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }.suite-specs .demo-button { padding: 0; min-height: 24px; border: 0; font-size: 13px; }
.suite-swatches { display: flex; gap: 12px; }.suite-swatches button { padding: 3px; border: 1px solid transparent; background: transparent; }.suite-swatches button[aria-pressed="true"] { border-color: #1d1d1c; }.suite-swatches i { display: block; width: 32px; height: 32px; }
.suite-music-feature { display: grid; grid-template-columns: .85fr 1.15fr; background: #202020; }.suite-music-feature > .demo-art { width: 100%; height: 330px; }.suite-music-feature > div { padding: 28px; display: flex; align-items: start; flex-direction: column; }.suite-music-feature span { font-size: 11px; color: #c0c0c0; }.suite-music-feature h3 { margin: 20px 0 12px; font-size: 32px; line-height: 1.2; font-weight: 500; }.suite-music-feature p { max-width: 320px; font-size: 14px; line-height: 1.8; color: #bcbcbc; }.suite-music-feature .demo-button { margin: 20px 0 12px; background: #e0eeee; color: #17272a; border: 0; }.suite-music-feature small { font-size: 11px; color: #bcbcbc; }.suite-object-grid.is-tracks { display: block; }
.suite-track { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto 40px 40px; align-items: center; gap: 16px; min-height: 86px; padding: 12px 0; border-bottom: 1px solid #2b2b2b; }.suite-track .demo-art { width: 60px; height: 60px; }.suite-track > button { min-width: 0; padding: 0; border: 0; background: transparent; text-align: start; color: inherit; }.suite-track > .demo-button { min-height: 40px; min-width: 0; padding: 0; color: inherit; }.suite-track strong { display: block; font-size: 15px; font-weight: 500; }.suite-track button > span { display: block; margin-top: 7px; font-size: 12px; color: #bcbcbc; }.suite-track > span { font-size: 12px; font-variant-numeric: tabular-nums; color: #bcbcbc; }.suite-playlist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.suite-playlist-grid > button { min-width: 0; padding: 0; border: 0; background: transparent; text-align: start; color: inherit; }.suite-playlist-grid .demo-art { width: 100%; height: 190px; }.suite-playlist-grid strong { display: block; margin: 14px 0 7px; font-size: 16px; font-weight: 500; }.suite-playlist-grid span { font-size: 12px; color: #bcbcbc; }
.suite-playlist-header { display: flex; gap: 28px; align-items: center; margin: 24px 0; }.suite-playlist-header .demo-art { width: 200px; height: 200px; }.suite-playlist-header span, .suite-playlist-header p { color: #bcbcbc; font-size: 12px; }.suite-playlist-header h4 { margin: 16px 0; font-size: 28px; }.suite-playlist-header .demo-button { margin-top: 16px; }.suite-playlist-track { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }.suite-music-detail > div > .demo-art { width: 100%; height: 380px; }.suite-waveform { display: flex; align-items: center; gap: 3px; height: 65px; margin: 24px 0; }.suite-waveform i { flex: 1; min-width: 1px; background: #66b7c2; }.suite-music-detail .suite-specs > div { border-color: #333; }.suite-music-detail .suite-specs dt { color: #bcbcbc; }
.case-product[data-kind="music"][data-mode="app"] .suite-app { --demo-ink: #f4f4f2; --suite-muted: #bcbcbc; --suite-rule: #292929; color: #f4f4f2; background: #111; }.case-product[data-kind="music"] .suite-app-nav { background: #101010; }.case-product[data-kind="music"] .suite-app-nav button { color: #bcbcbc; }.case-product[data-kind="music"] .suite-app-nav button[aria-current] { background: #242424; color: #fff; }.case-product[data-kind="music"][data-mode="app"] .suite-page-title p, .case-product[data-kind="music"][data-mode="app"] .suite-overline, .case-product[data-kind="music"][data-mode="app"] .suite-note, .case-product[data-kind="music"][data-mode="app"] .suite-music-detail > section > p, .case-product[data-kind="music"][data-mode="app"] .suite-music-detail > section > span { color: #bcbcbc; }.case-product[data-kind="music"][data-mode="app"] .suite-search { background: #191919; border-color: #3c3c3c; }.case-product[data-kind="music"][data-mode="app"] .suite-search input { color: #eee; }.case-product[data-kind="music"][data-mode="app"] .suite-filter-chips button { color: #bcbcbc; border-color: #444; }.case-product[data-kind="music"][data-mode="app"] .suite-filter-chips button[aria-pressed="true"] { background: #2b2b2b; color: #fff; border-color: #a1bdc1; }.case-product[data-kind="music"][data-mode="app"] .suite-empty { background: #202020; color: #bcbcbc; }.case-product[data-kind="music"][data-mode="app"] .suite-feedback { background: #1d2b2c; color: #bfe4e8; }
.suite-commerce-promo { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; padding: 30px; background: #faece5; color: #5b2520; }.suite-commerce-promo span { font-size: 12px; color: #9d3e29; }.suite-commerce-promo h3 { margin: 18px 0; font-size: 32px; line-height: 1.2; font-weight: 600; }.suite-commerce-promo p { font-size: 14px; color: var(--app-muted, #715049); line-height: 1.8; }.suite-commerce-promo .demo-button { margin-top: 20px; background: #c32c20; color: #fff; border: 0; }.suite-commerce-promo > .demo-art { width: 100%; height: 220px; }.suite-shop-service { display: flex; justify-content: space-between; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--app-rule, #eee5df); }.suite-shop-service > span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--app-muted, #665a51); }.suite-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.suite-category-grid > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; background: #f6f4ef; border: 0; color: var(--app-ink, #3e332b); }.suite-category-grid strong { font-size: 14px; font-weight: 500; }.suite-voucher { display: flex; align-items: center; justify-content: space-between; padding: 24px; background: #fff4df; color: #594211; }.suite-voucher strong { font-size: 22px; font-weight: 500; }.suite-voucher p { font-size: 13px; margin-top: 7px; }
.suite-product-detail > div > .demo-art { width: 100%; height: 350px; }.suite-product-thumbnails { display: flex; gap: 12px; margin-top: 16px; }.suite-product-thumbnails .demo-art { width: 72px; height: 72px; }.suite-product-price { display: block; font-size: 28px; font-weight: 500; margin: 20px 0; font-variant-numeric: tabular-nums; }.suite-product-points { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; font-size: 12px; color: var(--app-muted, #626b65); }.suite-product-points > span { display: flex; align-items: center; gap: 8px; }.suite-size-options { display: flex; gap: 8px; padding: 0; margin: 20px 0; border: 0; }.suite-size-options legend { font-size: 13px; margin-bottom: 12px; }.suite-size-options label { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 10px; border: 1px solid var(--app-rule, #e2e5df); font-size: 13px; }.suite-size-options input { accent-color: #9d3328; }
.suite-checkout-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); align-items: start; gap: 28px; }.suite-cart-items article { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-cart-items .demo-art { width: 110px; height: 125px; }.suite-cart-items h4 { font-size: 17px; font-weight: 500; }.suite-cart-items p { font-size: 12px; margin: 8px 0; color: var(--app-muted, #626b65); }.suite-cart-items strong { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }.suite-cart-items .demo-quantity { margin-top: 14px; }.suite-order-summary { position: sticky; top: 0; padding: 24px; background: var(--app-panel, #f6f6f1); }.suite-order-summary h4 { font-size: 18px; font-weight: 500; margin-bottom: 20px; }.suite-order-summary dl > div { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 16px; font-size: 13px; }.suite-order-summary dd { font-variant-numeric: tabular-nums; }.suite-order-summary dl > div.is-total { padding-top: 18px; border-top: 1px solid var(--app-rule, #dfe3da); font-size: 17px; }.suite-order-summary > .demo-button { width: 100%; background: #c32c20; color: #fff; border: 0; margin-top: 10px; }
.suite-order-list > article { padding: 20px; border: 1px solid var(--app-rule, #e5e9e2); margin-bottom: 16px; }.suite-order-list header, .suite-order-list footer { display: flex; align-items: center; gap: 16px; justify-content: space-between; }.suite-order-list header > strong { font-size: 14px; font-weight: 500; }.suite-order-products { display: flex; flex-direction: column; gap: 12px; margin: 20px 0; }.suite-order-products > div { display: flex; align-items: center; gap: 14px; }.suite-order-products .demo-art { width: 56px; height: 56px; }.suite-order-products strong { font-size: 14px; font-weight: 500; }.suite-order-products small { display: block; font-size: 12px; color: var(--app-muted, #626b65); margin-top: 7px; }.suite-order-list footer { border-top: 1px solid var(--app-rule, #e7ebe7); padding-top: 16px; flex-wrap: wrap; }.suite-order-list footer > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-order-list footer > strong { font-size: 15px; font-variant-numeric: tabular-nums; }.suite-order-list footer .demo-button { font-size: 12px; padding: 4px 0; border: 0; }
.suite-finance-balance { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; background: #edf2f8; color: #153666; }.suite-finance-balance > div > span { font-size: 12px; }.suite-finance-balance strong { display: block; margin: 12px 0; font-size: 34px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }.suite-finance-balance p { font-size: 13px; color: #536782; }.suite-finance-balance .demo-button { background: #fff; border: 0; font-size: 12px; }
.suite-chart { --chart-1: var(--demo-accent); --axis-ink: #66726b; --grid: #e6eae6; --ink: #1c3326; min-height: 190px; width: 100%; overflow: hidden; }.suite-chart > svg { display: block; width: 100%; }.suite-price-heading { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; }.suite-price-heading strong { font-size: 28px; font-weight: 400; font-variant-numeric: tabular-nums; }.suite-price-heading span { font-size: 12px; }.suite-positive { color: #287045 !important; }.suite-negative { color: #aa3d34 !important; }
.suite-market-list { min-width: 0; }.suite-market-head, .suite-market-list article { display: grid; grid-template-columns: minmax(0, 1fr) 90px 100px 34px; gap: 16px; align-items: center; }.suite-market-head { color: var(--app-muted, #626b65); font-size: 11px; padding: 10px 0; }.suite-market-head > span:nth-child(n+2) { text-align: end; }.suite-market-list article { min-height: 76px; padding: 12px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-market-list article > button:first-child { min-width: 0; padding: 0; border: 0; background: transparent; text-align: start; color: inherit; }.suite-market-list article strong { display: block; font-weight: 500; font-size: 14px; font-variant-numeric: tabular-nums; }.suite-market-list article > button:first-child > span { display: block; color: var(--app-muted, #626b65); font-size: 11px; margin-top: 6px; }.suite-market-list article > strong, .suite-market-list article > span { text-align: end; font-variant-numeric: tabular-nums; }.suite-market-list article > span { font-size: 13px; }.suite-market-list article small { display: block; font-size: 11px; margin-top: 5px; }.suite-market-list .demo-button { min-width: 34px; padding: 4px; border: 0; color: var(--app-muted, #7c8580); background: transparent; }.suite-market-list .demo-button[aria-pressed="true"] { color: #285b42; }.suite-finance-grid > .suite-section { min-width: 0; }.suite-finance-grid .suite-market-head, .suite-finance-grid .suite-market-list article { grid-template-columns: minmax(0, 1fr) 65px 70px 30px; gap: 10px; }
.suite-notice-list > button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; width: 100%; text-align: start; color: inherit; padding: 17px 0; background: transparent; border: 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-notice-list > button > span { grid-column: 1; color: var(--app-muted, #626b65); font-size: 11px; }.suite-notice-list strong { display: block; grid-column: 1; font-size: 14px; font-weight: 500; line-height: 1.6; }.suite-notice-list strong i { display: inline-block; width: 5px; height: 5px; margin-inline-start: 8px; background: #1f5f9c; border-radius: 50%; }.suite-notice-list > button > svg { grid-column: 2; grid-row: 1 / 3; align-self: center; }.suite-notice-article { max-width: 780px; }.suite-notice-article > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-notice-article h4 { margin: 22px 0; font-size: 25px; font-weight: 500; }.suite-notice-article > p, .suite-notice-article li { font-size: 15px; line-height: 2; color: var(--app-muted, #526278); }.suite-notice-article h5 { font-size: 17px; margin: 24px 0 12px; }.suite-notice-article ol { margin: 20px 0; padding-inline-start: 20px; }
.suite-symbol-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; }.suite-symbol-heading > div { display: flex; align-items: baseline; gap: 16px; }.suite-symbol-heading strong { font-size: 34px; font-weight: 400; font-variant-numeric: tabular-nums; }.suite-symbol-heading span { font-size: 13px; }.suite-periods { display: flex; gap: 10px; border-bottom: 1px solid var(--app-rule, #e7ebe7); margin-bottom: 12px; }.suite-periods button { min-height: 40px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--app-muted, #626b65); font-size: 12px; }.suite-periods button[aria-pressed="true"] { border-bottom-color: #153d78; color: #153d78; }.suite-orderbook header, .suite-orderbook > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; text-align: end; font-size: 12px; padding: 10px 0; }.suite-orderbook header { color: var(--app-muted, #626b65); }.suite-orderbook > div { position: relative; font-variant-numeric: tabular-nums; }.suite-orderbook > div::before { content: ''; position: absolute; width: var(--depth); height: 100%; inset: 0 0 0 auto; background: var(--app-panel, #eff3f8); z-index: 0; }.suite-orderbook > div > * { position: relative; z-index: 1; padding-right: 7px; }.suite-orderbook b { font-weight: 500; }.suite-allocation > div { display: flex; justify-content: space-between; gap: 20px; font-size: 13px; }.suite-allocation > i { display: block; height: 10px; margin: 20px 0; background: var(--app-panel, #e5eaf1); }.suite-allocation b { font-weight: 500; }.suite-allocation > i > b { display: block; height: 100%; background: #153d78; }
.suite-positions header, .suite-positions article { display: grid; grid-template-columns: minmax(0, 1fr) 140px 160px 40px; gap: 20px; align-items: center; }.suite-positions header { color: var(--app-muted, #626b65); font-size: 11px; padding: 12px 0; }.suite-positions header > span:nth-child(n+2) { text-align: end; }.suite-positions article { min-height: 80px; padding: 14px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-positions article strong { display: block; font-size: 14px; font-weight: 500; }.suite-positions article > div:nth-child(n+2) { text-align: end; font-variant-numeric: tabular-nums; }.suite-positions small { display: block; color: var(--app-muted, #626b65); font-size: 12px; margin-top: 6px; }.suite-positions .demo-button { padding: 8px; border: 0; }.suite-quote { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; background: var(--app-panel, #f1f4f8); }.suite-quote strong { font-size: 26px; font-weight: 400; font-variant-numeric: tabular-nums; }.suite-quote span { font-size: 13px; }
.suite-finance-orders > article { padding: 20px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-finance-orders header, .suite-finance-orders footer, .suite-finance-orders article > div { display: flex; justify-content: space-between; align-items: center; gap: 16px; }.suite-finance-orders header { margin-bottom: 16px; }.suite-finance-orders header > strong { font-size: 13px; font-weight: 500; }.suite-finance-orders small { display: block; margin-top: 7px; font-size: 12px; font-weight: 400; color: var(--app-muted, #626b65); }.suite-finance-orders article > div > b { text-align: end; font-weight: 500; font-variant-numeric: tabular-nums; }.suite-finance-orders footer { margin-top: 16px; color: var(--app-muted, #626b65); font-size: 12px; }.suite-finance-orders footer > span { margin-right: auto; }.suite-alerts article { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-alerts article > div { flex: 1; }.suite-alerts strong { font-size: 15px; font-weight: 500; }.suite-alerts p { color: var(--app-muted, #626b65); font-size: 13px; margin-top: 8px; }
.suite-matching-intro { padding: 20px 24px; margin: 0 0 24px; background: #fbf0f4; color: #69233f; border-radius: 8px; }.suite-matching-intro > span { display: block; font-size: 18px; font-weight: 500; }.suite-matching-intro p { margin-top: 10px; font-size: 13px; color: var(--app-muted, #765863); }.suite-matching-grid .suite-object-image .demo-art { height: 280px; }.suite-profile-detail > div > .demo-art { height: 460px; width: 100%; object-fit: cover; object-position: center 24%; border-radius: 12px; }.suite-profile-photo-note { font-size: 11px; color: var(--app-muted, #626b65); margin-top: 10px; }.suite-profile-detail h3 small { font-size: 17px; margin-inline-start: 10px; color: var(--app-muted, #626b65); }.suite-interest-tags { display: flex; flex-wrap: wrap; gap: 10px; }.suite-interest-tags .suite-tag { color: #8a3f61; background: #f8edf2; }.suite-profile-prompt { padding: 24px; background: #fbf3f6; border-radius: 8px; }.suite-profile-prompt h5 { font-size: 16px; font-weight: 500; }.suite-profile-prompt p { margin: 14px 0; color: var(--app-muted, #765863); font-size: 14px; line-height: 1.8; }
.suite-events article, .suite-admin-events article { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-event-date { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: var(--app-panel, #f5f4ef); color: #5a4c3c; border-radius: 6px; }.suite-event-date strong { font-size: 23px; line-height: 1.2; font-weight: 400; }.suite-event-date span { font-size: 11px; }.suite-events article > div > span, .suite-admin-events p, .suite-admin-events article > div > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-events h4, .suite-admin-events h4 { font-size: 17px; margin: 8px 0; font-weight: 500; }.suite-events p { font-size: 12px; color: var(--app-muted, #626b65); }.suite-events .demo-button { font-size: 12px; }
.suite-inbox { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 470px; border: 1px solid #e1e7df; background: #fff; color: #24382b; }.suite-inbox > aside { border-inline-end: 1px solid #e1e7df; }.suite-inbox > aside > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 94px; padding: 18px 14px; border: 0; border-bottom: 1px solid var(--app-rule, #edf0ea); background: transparent; color: inherit; text-align: start; }.suite-inbox > aside > button[aria-pressed="true"] { background: #f0f4ec; }.suite-inbox > aside > button > span:nth-child(2) { min-width: 0; flex: 1; }.suite-inbox strong { font-size: 13px; font-weight: 500; }.suite-inbox strong i { display: inline-block; width: 5px; height: 5px; background: #7a3b61; border-radius: 50%; margin-inline-start: 8px; }.suite-inbox small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--app-muted, #626b65); margin-top: 6px; max-width: 170px; }.suite-inbox time { color: var(--app-muted, #626b65); font-size: 11px; flex: none; }.suite-inbox > section { display: flex; min-width: 0; flex-direction: column; }.suite-inbox > section > header { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-inbox > section > header .demo-button { display: none; }.suite-chat-messages { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; flex: 1; max-height: 430px; overflow: auto; }.suite-chat-messages > div { max-width: 85%; }.suite-chat-messages p { padding: 14px 16px; background: var(--app-panel, #f0f3ed); border-radius: 8px 8px 8px 0; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }.suite-chat-messages time { display: block; font-size: 11px; margin-top: 6px; }.suite-chat-messages .is-self { align-self: flex-end; }.suite-chat-messages .is-self p { background: #e5efe2; border-radius: 8px 8px 0 8px; }.suite-chat-messages .is-self time { text-align: end; }.suite-message-form { display: flex; gap: 12px; padding: 16px; border-top: 1px solid var(--app-rule, #e7ebe7); }.suite-message-form > label { flex: 1; min-width: 0; }.suite-message-form textarea { width: 100%; min-height: 70px; padding: 10px; resize: vertical; background: #fff; color: var(--app-ink, #263b2c); border: 1px solid #d6ded2; border-radius: 6px; font-size: 14px; }
.suite-account-heading { display: flex; align-items: center; gap: 20px; padding: 24px; background: #f4f7f0; color: #24432f; margin-bottom: 28px; }.suite-account-heading > .suite-avatar { width: 64px; height: 64px; font-size: 24px; }.suite-account-heading > div { display: flex; align-items: start; flex-direction: column; gap: 7px; }.suite-account-heading strong { font-size: 20px; font-weight: 500; }.suite-account-heading > div > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-account-form { max-width: 780px; }.suite-account-form .suite-section { margin-top: 0; }.suite-account-links { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; font-size: 13px; color: var(--app-muted, #626b65); }
.suite-form { display: flex; flex-direction: column; align-items: stretch; gap: 22px; color: var(--app-ink, #263b2c); }.suite-form label { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }.suite-form input:not([type="radio"]):not([type="checkbox"]), .suite-form select, .suite-form textarea { min-width: 0; width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--app-rule, #d4ddd1); border-radius: 6px; background: #fff; color: var(--app-ink, #263b2c); font-size: 14px; }.suite-form textarea { resize: vertical; line-height: 1.8; }.suite-form input[readonly] { background: var(--app-panel, #f5f7f2) !important; }.suite-form label + label, .suite-form label + .suite-form-grid { margin-top: 2px; }.suite-form .suite-section label { margin-top: 18px; }.suite-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }.suite-form .suite-form-grid label { margin-top: 0; }.suite-form > .demo-button[type="submit"] { align-self: flex-end; }.suite-edit-form { max-width: 720px; }.suite-choice-list { display: flex; flex-direction: column; gap: 12px; }.suite-choice-list label { display: flex; flex-direction: row; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--app-rule, #e0e6dc); border-radius: 6px; }.suite-choice-list strong { display: block; font-size: 14px; font-weight: 500; }.suite-choice-list small { display: block; margin-top: 7px; color: var(--app-muted, #626b65); font-size: 12px; }.suite-choice-list.is-inline { flex-direction: row; }.suite-choice-list.is-inline label { flex: 1; }.suite-choice-list input { width: 17px; height: 17px; accent-color: #284f34; }.suite-inline-form { display: flex; align-items: end; gap: 12px; margin: 24px 0; }.suite-inline-form > label { flex: 1; font-size: 13px; }.suite-inline-form input { display: block; width: 100%; min-height: 42px; margin-top: 10px; border: 1px solid var(--app-rule, #d4ddd1); border-radius: 6px; padding: 8px 12px; color: var(--app-ink, #263b2c); background: #fff; }.suite-toggle-row { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 24px; min-height: 48px; padding: 12px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-toggle-row input { width: 18px; height: 18px; accent-color: #264b32; }.suite-error { color: #a32c28; font-size: 13px; padding: 12px 0; line-height: 1.8; }.suite-image-error { display: block; color: #a32c28; font-size: 12px; padding: 8px; }
/* Full back office: one tinted frame, labelled navigation, no shadows on work surfaces. */
.suite-admin-shell { --chart-1: var(--demo-accent); --axis-ink: #626b65; --ink: #253b2b; --grid: #e7ebe7; }
.suite-admin-shell .demo-admin-sidebar { gap: 22px; padding-top: 24px; }.suite-admin-shell .demo-admin-sidebar nav { gap: 3px; }.suite-admin-shell .demo-admin-sidebar nav .demo-button { font-size: 13px; min-height: 42px; }.suite-admin-shell .demo-admin-brand { font-size: 18px; }.suite-admin-shell .demo-admin-brand > span { font-size: 11px; }.suite-workspace { display: flex; align-items: center; gap: 10px; padding-inline: 10px; }.suite-workspace strong { display: block; font-size: 12px; font-weight: 500; }.suite-workspace div > span { display: block; font-size: 11px; color: var(--app-muted, #626b65); margin-top: 5px; }.suite-admin-bottom { margin-top: auto; padding: 0 10px; }.suite-admin-bottom > p { color: var(--app-muted, #626b65); font-size: 12px; line-height: 1.8; }.suite-admin-bottom > span { display: block; color: var(--app-muted, #626b65); font-size: 11px; margin-top: 12px; overflow-wrap: anywhere; }.suite-admin-mobile-select { display: none; }.suite-admin-shell .demo-admin-sheet { min-width: 0; }.suite-admin-shell .suite-page-title h3 { font-size: 24px; }.suite-admin-shell .suite-section > header h4 { font-size: 16px; }.suite-admin-shell .suite-stats { margin: 16px 0 8px; padding: 20px 0; }.suite-admin-shell .suite-stats dd { font-size: 25px; }.suite-admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }.suite-admin-overview-grid > .suite-section { margin-top: 20px; }.suite-admin-mini-list article { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-admin-mini-list .demo-art { width: 50px; height: 62px; flex: none; object-fit: cover; }.suite-admin-mini-list article > div { flex: 1; min-width: 0; }.suite-admin-mini-list strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.7; overflow-wrap: anywhere; }.suite-admin-mini-list span { display: block; color: var(--app-muted, #626b65); font-size: 12px; margin-top: 5px; }.suite-admin-mini-list .demo-button { font-size: 12px; padding-inline: 0; border: 0; }.suite-member-breakdown { display: flex; gap: 32px; margin: 8px 0 16px; }.suite-member-breakdown strong { display: block; font-size: 24px; font-weight: 400; }.suite-member-breakdown span { display: block; font-size: 12px; color: var(--app-muted, #626b65); margin-top: 6px; }.suite-admin-mini-members > div { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--app-rule, #edf0ea); }.suite-admin-mini-members > div > span:nth-child(2) { flex: 1; font-size: 13px; }.suite-admin-mini-members small { display: block; color: var(--app-muted, #626b65); font-size: 11px; margin-top: 6px; }.suite-overview-stream > p { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--app-rule, #edf0ea); font-size: 13px; }.suite-overview-stream > p > strong { font-size: 20px; font-weight: 400; }.suite-overview-stream > article { display: flex; justify-content: space-between; gap: 14px; padding: 13px 0; font-size: 12px; color: var(--app-muted, #626b65); }.suite-overview-stream time { flex: none; font-variant-numeric: tabular-nums; }
.suite-admin-search { max-width: 360px; margin: 20px 0; }.suite-data-head, .suite-data-table > article { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(130px, .9fr) 75px 95px; gap: 20px; align-items: center; }.suite-data-head { color: var(--app-muted, #626b65); font-size: 12px; min-height: 40px; }.suite-data-table > article { min-height: 88px; padding: 16px 0; border-bottom: 1px solid var(--app-rule, #edf0ea); }.suite-data-table strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }.suite-data-table small { display: block; color: var(--app-muted, #626b65); font-size: 12px; margin-top: 7px; overflow-wrap: anywhere; }.suite-data-table .demo-button { min-height: 36px; font-size: 12px; padding-inline: 8px; border: 0; }.suite-person-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }.suite-person-cell > span:last-child { min-width: 0; }.suite-record-list article { display: flex; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--app-rule, #edf0ea); }.suite-record-list article > div:first-child { flex: 1; min-width: 0; }.suite-record-list strong { display: block; font-size: 14px; font-weight: 500; }.suite-record-list span { display: block; font-size: 12px; color: var(--app-muted, #626b65); margin-top: 6px; }.suite-record-list article > b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }.suite-record-list .suite-progress { margin-top: 8px; width: 120px; }.suite-record-list .suite-progress span { height: 4px; }.suite-request-admin article, .suite-reports article { position: relative; padding: 20px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-request-admin header, .suite-reports header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.suite-request-admin strong { font-size: 14px; font-weight: 500; }.suite-request-admin p, .suite-reports p { color: var(--app-muted, #626b65); font-size: 13px; line-height: 1.8; margin: 12px 0; white-space: pre-line; }.suite-request-admin article > span { font-size: 12px; color: var(--app-muted, #626b65); }.suite-request-admin .demo-button { margin-inline-start: 12px; border: 0; font-size: 12px; }.suite-reports h4 { margin-top: 16px; font-size: 18px; font-weight: 500; }.suite-reports .demo-button { margin-top: 8px; font-size: 12px; }
.suite-admin-playlists article { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-admin-playlists .demo-art { width: 80px; height: 80px; }.suite-admin-playlists article > div { flex: 1; }.suite-admin-playlists h4 { font-size: 17px; font-weight: 500; }.suite-admin-playlists p, .suite-admin-playlists span { font-size: 12px; color: var(--app-muted, #626b65); margin-top: 8px; }.suite-admin-playlists .demo-button { font-size: 12px; }.suite-order-table .suite-data-head > span:nth-child(3), .suite-order-table article > b { text-align: end; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }.suite-inventory > article { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-inventory .demo-art { width: 56px; height: 56px; }.suite-inventory article > div { flex: 1; }.suite-inventory strong { display: block; font-size: 14px; font-weight: 500; }.suite-inventory small { display: block; color: var(--app-muted, #626b65); font-size: 12px; margin-top: 7px; }.suite-stock-form { display: flex; align-items: center; gap: 10px; }.suite-stock-form input { width: 75px; min-height: 38px; border: 1px solid #d3dbcf; border-radius: 5px; padding: 8px; background: #fff; color: var(--app-ink, #263b2c); font-size: 14px; }.suite-stock-form .demo-button { font-size: 12px; }.suite-admin-coupons article { display: flex; align-items: center; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-admin-coupons article > div { flex: 1; }.suite-admin-coupons strong { font-size: 18px; font-weight: 500; }.suite-admin-coupons p { color: var(--app-muted, #626b65); font-size: 13px; margin-top: 10px; }
.suite-resources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }.suite-resources > article { min-width: 0; }.suite-resource-preview { height: 155px; display: grid; place-items: center; background: #f1f4ed; overflow: hidden; }.suite-resource-preview img { width: 100%; height: 100%; object-fit: cover; }.suite-resource-preview > svg { width: 38px; height: 38px; color: #65815b; }.suite-resources section > span { display: block; margin-top: 14px; font-size: 12px; color: var(--app-muted, #626b65); }.suite-resources h4 { margin: 9px 0; font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }.suite-resources p { color: var(--app-muted, #626b65); font-size: 12px; line-height: 1.8; }.suite-resources section > div { display: flex; gap: 12px; align-items: center; margin: 12px 0; }.suite-resources .demo-button { padding-inline: 0; border: 0; font-size: 12px; }
.suite-settings-form { max-width: none; }.suite-settings-form > section { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(0, 1.3fr); gap: 36px; padding: 24px 0; border-bottom: 1px solid var(--app-rule, #e7ebe7); }.suite-settings-form h4 { font-size: 17px; font-weight: 500; }.suite-settings-form section > div > p { margin-top: 12px; font-size: 13px; color: var(--app-muted, #626b65); line-height: 1.8; }.suite-settings-form section > div:last-child { display: flex; flex-direction: column; gap: 20px; padding: 22px; background: #f7f8f4; border-radius: 8px; }.suite-editor-extra { padding-top: 22px; border-top: 1px solid var(--app-rule, #e7ebe7); }.suite-editor-extra h4 { font-size: 16px; margin-bottom: 18px; }.suite-editor-extra select { min-height: 42px; padding: 10px; border: 1px solid #d5ddd5; border-radius: 5px; background: #fff; color: #253b2b; }
@media (max-width: 1100px) {
  .suite-app { grid-template-columns: 150px minmax(0, 1fr); }.suite-app-nav { padding-inline: 8px; }.suite-app-nav button { font-size: 12px; padding-inline: 12px; gap: 8px; }.suite-app-content { padding: 24px; }.suite-object-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.suite-object-grid > .suite-object:last-child:nth-child(3n) { grid-column: auto; }.suite-two-col, .suite-checkout-layout, .suite-classroom { grid-template-columns: minmax(0, 1fr); }.suite-classroom > aside { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.suite-classroom > aside > span, .suite-classroom > aside .suite-progress, .suite-classroom > aside > button:last-child { grid-column: 1 / -1; }.suite-classroom > aside .suite-progress { margin: 0; }.suite-lesson-image .demo-art { height: 240px; }.suite-training-grid { grid-template-columns: 1fr; }.suite-stats dd { font-size: 24px; }.suite-learning-hero { padding: 24px; grid-template-columns: 1fr 160px; gap: 22px; }.suite-learning-hero .demo-art { height: 230px; }.suite-fitness-hero { grid-template-columns: 1fr; }.suite-fitness-hero > .demo-art { height: 210px; grid-row: 1; object-position: center 12%; }.suite-brand-feature { grid-template-columns: 1fr; }.suite-brand-feature .demo-art { height: 270px; }.suite-brand-feature > div { padding: 24px; }.suite-music-feature { grid-template-columns: 180px minmax(0, 1fr); }.suite-music-feature > .demo-art { height: 100%; }.suite-music-feature h3 { font-size: 28px; }.suite-brand-detail, .suite-product-detail, .suite-profile-detail, .suite-music-detail, .suite-workout { grid-template-columns: 1fr; }.suite-brand-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.suite-brand-gallery > .demo-art { height: 230px; margin: 0; }.suite-profile-detail > div > .demo-art { height: 400px; }.suite-music-detail > div > .demo-art { height: 300px; }.suite-workout-media .demo-art { height: 320px; }.suite-instruction-grid { gap: 18px; }.suite-symbol-layout { grid-template-columns: 1fr; }.suite-inbox { grid-template-columns: 220px minmax(0, 1fr); }.suite-inbox > aside .suite-avatar { display: none; }.suite-playlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.suite-order-summary { position: static; }.suite-symbol-heading { align-items: start; flex-direction: column; }.suite-admin-shell .demo-admin-sidebar { padding: 16px 24px 0; }.suite-admin-shell .demo-admin-brand { display: flex; font-size: 17px; }.suite-admin-shell .demo-admin-brand > span { font-size: 11px; }.suite-workspace, .suite-admin-bottom { display: none; }.suite-admin-shell .demo-admin-sidebar nav { margin-top: 12px; }.suite-admin-shell .demo-admin-sidebar nav .demo-button { flex: none; }.suite-admin-overview-grid { gap: 20px; }.suite-data-head, .suite-data-table > article { grid-template-columns: minmax(0, 1.5fr) minmax(100px, 1fr) 65px 80px; gap: 12px; }.suite-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }.suite-settings-form > section { grid-template-columns: 1fr; gap: 20px; }.suite-inventory article { gap: 14px; flex-wrap: wrap; }.suite-inventory .suite-stock-form { margin-inline-start: auto; }.suite-positions header, .suite-positions article { grid-template-columns: minmax(0, 1fr) 110px 130px 30px; gap: 14px; }
}
@media (max-width: 700px) {
  .suite-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 58px minmax(0, 1fr) 68px; }.suite-app-header { padding: 10px 18px; gap: 16px; }.suite-wordmark { font-size: 17px; }.suite-wordmark .demo-icon { width: 23px; height: 23px; }.suite-app-header > div { gap: 10px; }.suite-app-header .suite-avatar { width: 30px; height: 30px; font-size: 12px; }.suite-app-nav { grid-row: 3; grid-column: 1; flex-direction: row; align-items: stretch; gap: 0; padding: 0 8px max(4px, env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--suite-rule); background: #fff; }.suite-app-nav > button { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 6px; padding: 9px 2px 4px; min-height: 60px; font-size: 11px; border-radius: 0; }.suite-app-nav button[aria-current] { background: transparent; color: var(--demo-accent); }.suite-app-nav button[aria-current] svg { stroke-width: 2; }.suite-app-nav span { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }.suite-app-nav .demo-icon { width: 20px; height: 20px; }.suite-app-main { grid-column: 1; grid-row: 2; }.suite-app-content { padding: 20px 18px 36px; }.suite-page-title { gap: 12px; margin-bottom: 20px; align-items: start; }.suite-page-title h3 { font-size: 23px; line-height: 1.4; }.suite-page-title p { font-size: 12px; margin-top: 7px; }.suite-page-title > .demo-button { font-size: 11px; min-height: 38px; padding: 5px 0; border: 0; background: transparent; color: inherit; max-width: 110px; white-space: normal; flex-wrap: wrap; }.suite-section { margin-top: 26px; }.suite-section > header h4 { font-size: 16px; }.suite-section > header .demo-button { min-height: 38px; }.suite-two-col { gap: 0; }.suite-stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding: 20px 0; margin: 20px 0; }.suite-stats > div { padding: 0; border: 0; }.suite-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }.suite-stats > div:last-child:nth-child(odd) dt { margin: 0; }.suite-stats dd { font-size: 24px; }.suite-stats dt { font-size: 12px; margin-bottom: 8px; }.suite-object-grid { gap: 24px 14px; }.suite-object-image > .demo-art { height: 145px; }.suite-object h4 { font-size: 15px; }.suite-object .suite-overline { font-size: 11px; }.suite-object > p { font-size: 12px; line-height: 1.7; }.suite-object .demo-favorite { width: 30px; height: 36px; }.suite-object .demo-favorite .demo-icon { width: 18px; }.suite-object footer { align-items: start; flex-direction: column; gap: 5px; padding-top: 10px; }.suite-object footer .demo-button { min-height: 38px; font-size: 12px; }.suite-object-info { margin-top: 10px; gap: 4px; }.suite-filters { gap: 12px; margin-bottom: 20px; }.suite-search { min-height: 44px; }.suite-filter-chips button { min-height: 40px; padding: 9px 12px; }.suite-learning-hero { grid-template-columns: minmax(0, 1fr) 105px; gap: 14px; padding: 20px; }.suite-learning-hero h3 { font-size: 24px; margin-top: 12px; line-height: 1.6; }.suite-learning-hero p { font-size: 13px; }.suite-learning-hero .demo-art { height: 170px; width: 105px; align-self: start; }.suite-learning-hero > div { min-width: 0; }.suite-learning-hero .demo-button { margin: 18px 0; min-height: 42px; padding: 10px 12px; font-size: 12px; }.suite-learning-hero .suite-progress { min-width: 0; }.suite-path li { min-height: 82px; }.suite-week { gap: 4px; }.suite-week > div { font-size: 11px; }.suite-progress-list article { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }.suite-progress-list article > .suite-progress { grid-column: 1 / -1; grid-row: 2; }.suite-classroom { gap: 20px; }.suite-classroom > aside { gap: 6px; }.suite-classroom > aside > button { padding: 10px 6px; gap: 6px; font-size: 12px; }.suite-classroom > aside button small { font-size: 11px; }.suite-classroom > aside button > b { font-size: 12px; }.suite-classroom > aside > button:last-child { justify-content: center; min-height: 40px; }.suite-lesson-image .demo-art { height: 180px; }.suite-lesson-body h4 { font-size: 22px; }.suite-lesson-body > p { font-size: 16px; }.suite-lesson-body blockquote { padding: 16px; font-size: 18px; }.suite-vocabulary > div { grid-template-columns: 1fr 1fr; gap: 8px 16px; }.suite-vocabulary > div > span:last-child { grid-column: 1 / -1; }.suite-quiz { padding: 16px; }.suite-quiz label { min-height: 46px; font-size: 14px; }.suite-classroom-footer .demo-button { flex: 1; font-size: 12px; }
  .suite-fitness-hero > div { padding: 24px 20px; }.suite-fitness-hero h3 { font-size: 29px; margin-top: 18px; }.suite-fitness-hero > .demo-art { height: 200px; }.suite-fitness-hero p { font-size: 13px; }.suite-fitness-hero .demo-button { margin-top: 20px; min-height: 44px; }.suite-schedule article { grid-template-columns: 55px minmax(0, 1fr) 38px; gap: 14px; }.suite-schedule .demo-button { padding: 8px; min-height: 42px; }.suite-training-grid article { grid-template-columns: 105px minmax(0, 1fr); }.suite-training-grid h4 { font-size: 17px; }.suite-training-grid article > div { padding: 16px; }.suite-training-grid article > .demo-art { min-height: 185px; }.suite-workout { gap: 22px; }.suite-workout-media .demo-art { height: 230px; }.suite-workout-console > h4 { font-size: 24px; }.suite-workout-console > p { font-size: 14px; }.suite-timer { font-size: 38px; }.suite-instruction-grid { grid-template-columns: 1fr; gap: 22px; }.suite-instruction-grid p { font-size: 14px; }.suite-instruction-grid h5 { font-size: 15px; }
  .suite-brand-intro h3 { font-size: 32px; }.suite-brand-intro p { font-size: 13px; }.suite-brand-feature { margin-top: 22px; }.suite-brand-feature .demo-art { height: 230px; }.suite-brand-feature > div { padding: 22px; }.suite-brand-feature h4 { font-size: 26px; margin-top: 16px; }.suite-brand-feature p { font-size: 14px; }.suite-material-samples { gap: 10px; }.suite-material-samples i { height: 64px; }.suite-material-samples > span { font-size: 11px; line-height: 1.5; }.suite-projects > article { grid-template-columns: 1fr; gap: 18px; }.suite-projects .demo-art { height: 220px; }.suite-projects h4 { font-size: 23px; }.suite-timeline { margin-block: 20px; }.suite-material-library { gap: 24px 16px; }.suite-material-plane { height: 150px; }.suite-material-library h4 { font-size: 19px; }.suite-material-library p { font-size: 12px; }.suite-material-library .demo-button { padding-inline: 0; border: 0; font-size: 12px; }.suite-selected-material { padding: 20px; }.suite-brand-gallery { grid-template-columns: 1fr; }.suite-brand-gallery > .demo-art { height: 240px; }.suite-brand-gallery > .demo-art:last-child { display: none; }.suite-brand-detail, .suite-product-detail, .suite-profile-detail, .suite-music-detail { gap: 24px; }.suite-brand-detail h3, .suite-product-detail h3, .suite-profile-detail h3, .suite-music-detail h3 { font-size: 28px; }.suite-specs > div { font-size: 13px; gap: 14px; }
  .suite-music-feature { grid-template-columns: 115px minmax(0, 1fr); }.suite-music-feature > div { padding: 22px 18px; }.suite-music-feature h3 { font-size: 26px; margin-top: 16px; }.suite-music-feature p { font-size: 12px; }.suite-music-feature small { font-size: 11px; line-height: 1.7; }.suite-music-feature .demo-button { font-size: 12px; padding: 10px; min-height: 42px; }.suite-track { grid-template-columns: 48px minmax(0, 1fr) 34px 34px; gap: 10px; min-height: 86px; }.suite-track .demo-art { width: 48px; height: 48px; }.suite-track > span { display: none; }.suite-track strong { font-size: 14px; }.suite-track button > span { font-size: 11px; }.suite-track > .demo-button { min-height: 44px; }.suite-playlist-grid { gap: 16px; }.suite-playlist-grid .demo-art { height: 150px; }.suite-playlist-grid strong { font-size: 15px; }.suite-playlist-grid span { font-size: 12px; }.suite-playlist-header { gap: 20px; }.suite-playlist-header .demo-art { width: 100px; height: 120px; }.suite-playlist-header h4 { font-size: 22px; margin: 10px 0; }.suite-playlist-header .demo-button { font-size: 12px; padding: 8px; }.suite-playlist-track { gap: 10px; }.suite-playlist-track > .demo-button { font-size: 11px; padding-inline: 4px; min-height: 40px; border: 0; }.suite-music-detail > div > .demo-art { height: 270px; }.suite-waveform { gap: 2px; }
  .suite-commerce-promo { padding: 22px 20px; grid-template-columns: 1.3fr .7fr; gap: 10px; }.suite-commerce-promo h3 { font-size: 28px; margin: 16px 0; }.suite-commerce-promo p { font-size: 13px; }.suite-commerce-promo > .demo-art { height: 190px; }.suite-commerce-promo .demo-button { min-height: 42px; padding: 10px; font-size: 12px; }.suite-shop-service { gap: 12px; flex-wrap: wrap; }.suite-shop-service > span { font-size: 11px; }.suite-shop-service > span:last-child { display: none; }.suite-category-grid { gap: 10px; }.suite-category-grid > button { flex-direction: column; align-items: start; gap: 12px; padding: 14px; min-height: 100px; }.suite-category-grid > button > svg:last-child { display: none; }.suite-category-grid strong { font-size: 12px; }.suite-voucher { padding: 20px; gap: 16px; }.suite-voucher strong { font-size: 20px; }.suite-voucher p { font-size: 12px; line-height: 1.8; }.suite-voucher .demo-button { padding-inline: 10px; font-size: 12px; }
  .suite-product-detail > div > .demo-art { height: 260px; }.suite-product-thumbnails .demo-art { width: 64px; height: 64px; }.suite-cart-items article { grid-template-columns: 75px minmax(0, 1fr); gap: 16px; }.suite-cart-items .demo-art { width: 75px; height: 95px; }.suite-cart-items article > strong { grid-column: 2; text-align: end; }.suite-cart-items h4 { font-size: 16px; }.suite-cart-items .demo-quantity .demo-button { width: 36px; min-height: 36px; }.suite-order-summary { padding: 20px; }.suite-order-list > article { padding: 18px; }.suite-order-list header { align-items: start; gap: 10px; }.suite-order-list .suite-tag { font-size: 11px; max-width: 180px; white-space: normal; }.suite-order-products strong { font-size: 14px; }.suite-order-list footer .demo-button { min-height: 38px; }.suite-order-list footer > strong { margin-inline-start: auto; }.suite-order-list footer > .demo-button { flex-basis: 100%; justify-content: flex-end; }
  .suite-finance-balance { padding: 22px; flex-direction: column; align-items: start; gap: 16px; }.suite-finance-balance strong { font-size: 30px; }.suite-finance-balance p { font-size: 12px; }.suite-finance-balance .demo-button { padding: 0; border: 0; background: transparent; min-height: 32px; }.suite-market-head, .suite-market-list article, .suite-finance-grid .suite-market-head, .suite-finance-grid .suite-market-list article { grid-template-columns: minmax(0, 1fr) 64px 62px 26px; gap: 8px; }.suite-market-head { font-size: 11px; }.suite-market-list article strong { font-size: 13px; }.suite-market-list article > button:first-child > span { font-size: 11px; line-height: 1.6; }.suite-market-list article > span { font-size: 12px; }.suite-market-list article .demo-button { min-width: 26px; padding: 4px 0; }.suite-market-list article .demo-icon { width: 18px; height: 18px; }.suite-market-list article small { font-size: 11px; }.suite-finance-grid .suite-section { margin-top: 24px; }.suite-price-heading strong { font-size: 26px; }.suite-symbol-heading > div { flex-wrap: wrap; gap: 12px; }.suite-symbol-heading strong { font-size: 30px; }.suite-symbol-heading span { font-size: 12px; }.suite-symbol-heading > div:last-child { gap: 10px; }.suite-symbol-heading .demo-button { font-size: 12px; min-height: 42px; padding: 8px 12px; }.suite-symbol-layout .suite-stats { gap: 20px; }.suite-positions header { display: none; }.suite-positions article { grid-template-columns: minmax(0, 1fr) 76px 100px; gap: 12px; }.suite-positions article > div:first-child { grid-column: 1 / -1; }.suite-positions article > div:nth-child(2) { text-align: start; }.suite-positions article > .demo-button { margin-inline-start: auto; padding: 8px; }.suite-positions article strong { font-size: 14px; }.suite-positions article small { font-size: 12px; }.suite-finance-orders header { gap: 12px; }.suite-finance-orders footer { flex-wrap: wrap; }.suite-finance-orders footer .demo-button { font-size: 12px; min-height: 40px; }.suite-alerts article { gap: 12px; flex-wrap: wrap; }.suite-alerts article > div { min-width: 160px; }.suite-alerts .suite-tag { margin-inline-start: 32px; }.suite-alerts .demo-button { margin-inline-start: auto; min-height: 38px; font-size: 12px; }.suite-alerts p { font-size: 12px; }.suite-chart { min-height: 185px; }.suite-notice-article > p, .suite-notice-article li { font-size: 14px; }.suite-notice-article h4 { font-size: 22px; }
  .suite-matching-intro { padding: 18px; margin-bottom: 20px; }.suite-matching-intro > span { font-size: 17px; }.suite-matching-intro p { font-size: 12px; line-height: 1.8; }.suite-matching-grid .suite-object-image .demo-art { height: 205px; }.suite-matching-grid .suite-object-image > span { bottom: 10px; left: 10px; font-size: 11px; padding: 3px 6px; }.suite-profile-detail > div > .demo-art { height: 370px; }.suite-profile-detail > section > p { font-size: 15px; }.suite-profile-prompt { padding: 20px; }.suite-profile-prompt p { font-size: 14px; }.suite-events article, .suite-admin-events article { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; }.suite-events article > .demo-button, .suite-admin-events article > .demo-button { grid-column: 2; justify-self: start; min-height: 40px; font-size: 12px; }.suite-events h4 { font-size: 16px; line-height: 1.6; }.suite-event-date { padding: 10px; }.suite-events article > div > span { font-size: 11px; line-height: 1.8; }
  .suite-inbox { display: block; min-height: 390px; border: 0; }.suite-inbox > section { display: none; }.suite-inbox.has-selection > aside { display: none; }.suite-inbox.has-selection > section { display: flex; min-height: 390px; }.suite-inbox > aside { border: 0; }.suite-inbox > aside .suite-avatar { display: inline-grid; }.suite-inbox > aside > button { min-height: 92px; padding-inline: 0; }.suite-inbox > aside > button > span:nth-child(2) { min-width: 0; }.suite-inbox small { max-width: 190px; font-size: 12px; }.suite-inbox > section > header { padding: 0 0 16px; }.suite-inbox > section > header .demo-button { display: flex; padding: 8px; min-height: 40px; border: 0; }.suite-chat-messages { padding: 20px 0; min-height: 240px; }.suite-chat-messages p { font-size: 14px; padding: 12px 14px; }.suite-message-form { padding: 14px 0 0; gap: 10px; }.suite-message-form .demo-button { padding: 10px; min-width: 42px; }.suite-account-heading { gap: 16px; padding: 20px; }.suite-account-heading > .suite-avatar { width: 54px; height: 54px; font-size: 22px; }.suite-account-heading strong { font-size: 18px; }.suite-account-links { align-items: start; flex-direction: column; gap: 14px; }.suite-form-grid { grid-template-columns: 1fr; gap: 20px; }.suite-form label { font-size: 14px; }.suite-form input:not([type="radio"]):not([type="checkbox"]), .suite-form select, .suite-form textarea { min-height: 44px; font-size: 14px; }.suite-form { gap: 20px; }.suite-form > .demo-button[type="submit"] { width: 100%; min-height: 44px; }.suite-inline-actions .demo-button { min-height: 44px; }.suite-inline-form { gap: 10px; }.suite-inline-form .demo-button { min-height: 44px; font-size: 12px; padding-inline: 10px; }
  .suite-admin-shell .demo-admin-sidebar { display: none; }.suite-admin-shell .demo-admin-top { min-height: 54px; padding: 8px 18px; gap: 10px; flex-wrap: wrap; }.suite-admin-shell .demo-admin-top > span { display: none; }.suite-admin-mobile-select { display: block; max-width: 160px; }.suite-admin-mobile-select select { min-height: 38px; padding: 6px 10px; max-width: 160px; border: 1px solid var(--app-rule, #cdd7cb); border-radius: 5px; background: #fff; color: var(--app-ink, #263b2c); font-size: 13px; }.suite-admin-shell { grid-template-rows: minmax(0, 1fr); }.suite-admin-shell .demo-admin-sheet { padding: 24px 18px 40px; }.suite-admin-shell .suite-page-title h3 { font-size: 23px; }.suite-admin-shell .suite-page-title > .demo-button { padding: 8px 10px; border: 1px solid var(--app-rule, #d5ddd0); max-width: 115px; font-size: 12px; }.suite-admin-shell .suite-page-title > .is-primary { color: #fff; background: #1d2821; border: 0; }.suite-admin-overview-grid { grid-template-columns: 1fr; gap: 0; }.suite-admin-overview-grid > .suite-section { margin-top: 26px; }.suite-admin-shell .suite-stats { margin: 20px 0 0; gap: 20px; }.suite-admin-shell .suite-stats dd { font-size: 24px; }.suite-admin-mini-list strong { font-size: 14px; }.suite-admin-mini-list .demo-button { min-height: 40px; }.suite-data-head { display: none; }.suite-data-table > article { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 18px; padding: 20px 0; }.suite-data-table > article > div:first-child { grid-column: 1 / -1; }.suite-data-table > article .suite-tag { grid-column: 2; grid-row: 2; justify-self: end; }.suite-data-table > article > .demo-button { grid-column: 2; grid-row: 3; justify-self: end; font-size: 12px; min-height: 40px; }.suite-data-table > article > div:nth-child(2) { grid-column: 1; grid-row: 2 / 4; }.suite-order-table > article > b { grid-column: 2; grid-row: 2; }.suite-person-cell > .suite-avatar { width: 40px; height: 40px; }.suite-data-table strong { font-size: 14px; }.suite-data-table small { font-size: 12px; }.suite-record-list article { gap: 14px; flex-wrap: wrap; }.suite-record-list article > div:first-child { min-width: 160px; }.suite-record-list .suite-progress { width: 100px; }.suite-admin-playlists article { gap: 14px; flex-wrap: wrap; }.suite-admin-playlists .demo-art { width: 60px; height: 60px; }.suite-admin-playlists article > div { min-width: 150px; }.suite-admin-playlists article > .demo-button { margin-inline-start: 74px; border: 0; padding-inline: 0; min-height: 40px; }.suite-admin-playlists article > .demo-button + .demo-button { margin-inline-start: 8px; }.suite-inventory > article > .suite-tag { margin-inline-start: 70px; }.suite-stock-form { margin-inline-start: auto; }.suite-stock-form .demo-button { min-height: 40px; font-size: 12px; }.suite-inventory .demo-art { width: 50px; height: 50px; }.suite-admin-coupons article { gap: 12px; flex-wrap: wrap; }.suite-admin-coupons article > div { min-width: 200px; }.suite-admin-coupons .demo-button { margin-inline-start: auto; min-height: 40px; font-size: 12px; }.suite-resources { grid-template-columns: 1fr; gap: 28px; }.suite-resources > article { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 18px; }.suite-resource-preview { height: 125px; }.suite-resources section > span { margin-top: 0; }.suite-resources .demo-button { min-height: 40px; }.suite-settings-form > section { padding: 18px 0 24px; }.suite-settings-form section > div:last-child { padding: 18px; }.suite-settings-form section > div > p { font-size: 13px; }.suite-editor-extra h4 { font-size: 16px; }
  .suite-app[dir="rtl"] .demo-icon[data-icon="arrow"], .suite-app[dir="rtl"] .demo-icon[data-icon="back"] { transform: scaleX(-1); }
}
@media (max-width: 360px) {
  .suite-app-content { padding-inline: 16px; }.suite-app-nav { padding-inline: 4px; }.suite-app-nav button { font-size: 11px; }.suite-app-content .suite-page-title h3 { font-size: 21px; }.suite-object-grid { gap: 24px 12px; }.suite-object-image > .demo-art { height: 125px; }.suite-object h4 { font-size: 14px; }.suite-matching-grid .suite-object-image .demo-art { height: 175px; }.suite-learning-hero { padding: 18px 16px; grid-template-columns: minmax(0, 1fr) 85px; gap: 12px; }.suite-learning-hero .demo-art { width: 85px; height: 150px; }.suite-learning-hero h3 { font-size: 22px; }.suite-commerce-promo { padding: 20px 16px; }.suite-commerce-promo h3 { font-size: 24px; }.suite-music-feature { grid-template-columns: 95px minmax(0, 1fr); }.suite-music-feature h3 { font-size: 24px; }.suite-market-head, .suite-market-list article, .suite-finance-grid .suite-market-head, .suite-finance-grid .suite-market-list article { grid-template-columns: minmax(0, 1fr) 60px 55px 22px; gap: 7px; }.suite-market-list article strong { font-size: 12px; }.suite-market-list article > span { font-size: 11px; }.suite-positions article { grid-template-columns: minmax(0, 1fr) 95px 30px; }.suite-inbox small { max-width: 155px; }.suite-admin-shell .demo-admin-sheet { padding-inline: 16px; }.suite-admin-mobile-select { max-width: 140px; }.suite-admin-mobile-select select { max-width: 140px; }.suite-order-list .suite-tag { max-width: 140px; }.suite-event-date { padding: 8px; }
}
.case-product[data-kind="music"][data-mode="app"] .suite-form { color: #e7eceb; }
.case-product[data-kind="music"][data-mode="app"] .suite-form input:not([type="checkbox"]):not([type="radio"]), .case-product[data-kind="music"][data-mode="app"] .suite-form select, .case-product[data-kind="music"][data-mode="app"] .suite-form textarea { background: #1d1d1d; border-color: #484848; color: #f2f4f2; }
.case-product[data-kind="music"][data-mode="app"] .suite-form .suite-toggle-row { border-color: #333; }
.case-product[data-kind="music"][data-mode="app"] .suite-form .demo-button { color: #e7eceb; background: #252525; border-color: #484848; }
.case-product[data-kind="music"][data-mode="app"] .suite-form .is-primary { color: #172729; background: #d9edeb; border: 0; }
.suite-product-photo { object-fit: cover; }
.suite-commerce-promo > .demo-art { object-fit: contain; }
.suite-promo-price { display: block; margin: 12px 0; font-size: 25px; font-weight: 500; font-variant-numeric: tabular-nums; }
.suite-inline-form { flex-wrap: wrap; }
.suite-coupon-error { flex-basis: 100%; padding: 0; margin: 0 !important; }
@media (max-width: 700px) { .suite-admin-shell .suite-page-title > .demo-button { max-width: 150px; flex-wrap: nowrap; white-space: nowrap; }.suite-app-nav button { font-size: 12px; } }
@media (max-width: 360px) { .suite-app-nav button { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .suite-object-image > .demo-art { transition: none; } }

/* Detail art keeps its own proportions; page controls remain immediately usable. */
.suite-workout-media .demo-art { object-position: center; height: auto; aspect-ratio: 4 / 3; }
.suite-music-detail > div > .demo-art { height: auto; aspect-ratio: 1; object-fit: cover; }
.suite-waveform i { transition: background-color .18s; }.suite-waveform i.is-played { background: #dbebcf; }
.suite-app h3:focus { outline: none; }
.case-product[data-kind="music"] .suite-record-bridge :is(p,small) { color: #adb4af; }
.case-product[data-kind="music"] .suite-record-bridge { border-color: #353b37; }
@media (min-width:1000px) {
 .suite-brand-detail > section, .suite-product-detail > section, .suite-profile-detail > section { position: sticky; top: 24px; align-self: start; }
 .suite-brand-gallery > .demo-art { height: auto; aspect-ratio: 4 / 3; }
 .suite-profile-detail > div > .demo-art { height: auto; max-height: 650px; object-fit: cover; }
}
@media (prefers-reduced-motion:reduce) { .suite-waveform i { transition: none; } }
html.showcase-viewing { scrollbar-gutter: auto; }
body:has(#motion-button[aria-pressed="false"]) .suite-object-image > .demo-art { transition: none; transform: none; }