/* Interval · component styles. Loaded after tokens.css. Every colour is a token. */

.ls-app, .ls-root { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
.ls-root { padding: var(--space-5); background: var(--bg); }
.ls-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.ls-row-flex { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.ls-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ls-icon { display: block; flex: none; }

/* AppIcon */
.ls-appicon { display: block; flex: none; }
.ls-appicon-ground { fill: var(--icon-ground); }
.ls-appicon-line { stroke: var(--icon-mark); stroke-opacity: .45; stroke-width: 20; stroke-linecap: round; fill: none; }
.ls-appicon-dot { fill: var(--icon-mark); }
.ls-appicon-ring { fill: var(--icon-ground); stroke: var(--icon-mark); stroke-width: 18; }
.ls-signin-icon { margin-bottom: var(--space-5); }

/* Button */
.ls-btn { appearance: none; box-sizing: border-box; font: inherit; font-size: 17px; line-height: 22px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-lg); min-width: var(--tap-min); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .15s ease, opacity .15s ease; text-align: center; }
.ls-btn--md { min-height: var(--tap-min); font-size: 16px; padding: 0 var(--space-4); }
.ls-btn--block { display: flex; width: 100%; }
.ls-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ls-btn--quiet { background: transparent; border-color: transparent; color: var(--accent); padding: 0 var(--space-3); }
.ls-btn:active { background: var(--surface-muted); }
.ls-btn--primary:active { background: var(--accent); opacity: .88; }
.ls-btn--quiet:active { background: var(--surface-muted); }
.ls-btn:disabled { opacity: .45; cursor: default; }
.ls-btn:focus-visible, .ls-row:focus-visible, .ls-opt:focus-visible, .ls-tick:focus-visible .ls-tick-box, .ls-tab:focus-visible, .ls-nav-item:focus-visible, .ls-end:focus-visible, .ls-notice:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ls-btn-ic-missed { color: var(--missed); }
.ls-btn-ic-accent { color: var(--accent); }

/* TextField */
.ls-field { display: flex; flex-direction: column; gap: 6px; }
.ls-field-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.ls-field-box { display: flex; align-items: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink-muted); }
.ls-field-box:focus-within, .ls-field--focus .ls-field-box { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ls-field-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; line-height: 24px; color: var(--ink); padding: 0; }
.ls-field-input::placeholder { color: var(--ink-muted); opacity: 1; }
.ls-field-hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* PageHeader */
.ls-head { padding: var(--space-2) 0 var(--space-5); }
.ls-head-bar { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); margin: 0 calc(var(--space-3) * -1); }
.ls-head-bar > :only-child { margin-left: auto; }
.ls-head-bar > .ls-back:only-child { margin-left: 0; }
.ls-head-title { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; margin: var(--space-1) 0 0; }
.ls-head-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: var(--space-1) 0 0; }
.ls-head--inline { padding-bottom: var(--space-3); }
.ls-head--inline .ls-head-bar { display: grid; grid-template-columns: 1fr auto 1fr; }
.ls-head--inline .ls-head-bar > :first-child { justify-self: start; }
.ls-head--inline .ls-head-bar > :last-child { justify-self: end; }
.ls-head-inline-title { font-size: 17px; line-height: 22px; font-weight: 600; text-align: center; }
.ls-head-meta { font-size: 15px; line-height: 20px; color: var(--ink-muted); padding: 0 var(--space-3); font-variant-numeric: tabular-nums; }
.ls-back { padding-left: var(--space-2); gap: 2px; font-weight: 500; }

/* TabBar (phone) */
.ls-tabbar { display: flex; border-top: 1px solid var(--line); background: var(--bg); padding: var(--space-1) var(--space-2) var(--safe-bottom, 0px); flex: none; }
.ls-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; font: inherit; font-size: 12px; line-height: 14px; font-weight: 500; color: var(--ink-muted); background: none; border: 0; border-radius: var(--radius-md); cursor: pointer; padding: 0; }
.ls-tab[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* Sidebar (iPad) */
.ls-side { width: var(--sidebar-width); flex: none; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-6) var(--space-4) var(--space-6); border-right: 1px solid var(--line); background: var(--bg); }
.ls-side-brand { display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-3) var(--space-6); }
.ls-side-name { font-size: 17px; line-height: 22px; font-weight: 600; }
.ls-side-sub { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ls-nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-min); padding: 0 var(--space-3); border-radius: var(--radius-md); font: inherit; font-size: 17px; line-height: 22px; color: var(--ink); background: transparent; border: 0; text-align: left; cursor: pointer; width: 100%; }
.ls-nav-item .ls-icon { color: var(--ink-muted); }
.ls-nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.ls-nav-item[aria-current="page"] .ls-icon { color: var(--accent); }
.ls-nav-count { margin-left: auto; font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.ls-side-spacer { flex: 1; }
.ls-side-rule { height: 1px; background: var(--line); margin: var(--space-3) var(--space-3); }

/* List + ListRow */
.ls-group + .ls-group { margin-top: var(--space-6); }
.ls-group-label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); margin: 0 var(--space-1) var(--space-2); display: flex; justify-content: space-between; gap: var(--space-2); }
.ls-group-label span:last-child { font-weight: 400; font-variant-numeric: tabular-nums; }
.ls-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.ls-list > * + * { border-top: 1px solid var(--line); }
.ls-group-footer { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: var(--space-2) var(--space-1) 0; }
.ls-row { display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: 64px; padding: var(--space-3) var(--space-4); background: transparent; border: 0; border-radius: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.ls-list > .ls-row + .ls-row, .ls-list > * + .ls-row { border-top: 1px solid var(--line); }
.ls-row:active { background: var(--surface-muted); }
.ls-row[aria-disabled="true"] { cursor: default; }
.ls-row[aria-disabled="true"] .ls-row-title { color: var(--ink-muted); }
.ls-row-lead { color: var(--ink-muted); }
.ls-row-main { flex: 1; min-width: 0; }
.ls-row-title { display: block; font-size: 17px; line-height: 22px; }
.ls-row-sub { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }
.ls-row--sm .ls-row-title { font-size: 15px; line-height: 21px; }
.ls-row-meta { font-size: 15px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.ls-row-chev { color: var(--ink-muted); margin-right: calc(var(--space-1) * -1); }
.ls-row--plain { min-height: var(--row-min); }

/* Tick */
.ls-tick { appearance: none; border: 0; background: transparent; width: var(--tap-min); height: var(--tap-min); display: grid; place-items: center; padding: 0; margin: -4px calc(var(--space-3) * -1) -4px 0; cursor: pointer; flex: none; }
.ls-tick-box { box-sizing: border-box; width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); display: grid; place-items: center; background: var(--surface); color: var(--on-accent); transition: background-color .15s ease; }
.ls-tick[aria-checked="true"] .ls-tick-box { background: var(--accent); border-color: var(--accent); }

/* LectureRow */
.ls-lrow { display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: var(--row-min); padding: var(--space-2) var(--space-4); background: transparent; border: 0; font: inherit; text-align: left; color: var(--ink); }
.ls-lrow--button { cursor: pointer; }
.ls-lrow--button:active { background: var(--surface-muted); }
.ls-lrow-num { width: 22px; flex: none; font-size: 15px; line-height: 22px; font-variant-numeric: tabular-nums; color: var(--ink-muted); text-align: right; align-self: flex-start; padding-top: var(--space-2); }
.ls-lrow-main { flex: 1; min-width: 0; padding: 6px 0; }
.ls-lrow-title { display: block; font-size: 17px; line-height: 22px; }
.ls-lrow-meta { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.ls-lrow-meta--accent { color: var(--accent); font-weight: 600; }
.ls-lrow--suggested { background: var(--accent-soft); }
.ls-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--missed); flex: none; }
.ls-dot--accent { background: var(--accent); width: 8px; height: 8px; }

/* ProgressLine */
.ls-prog { display: block; }
.ls-prog-track { height: var(--progress-weight); background: var(--line); border-radius: var(--radius-full); overflow: hidden; }
.ls-prog-fill { height: 100%; background: var(--accent); border-radius: inherit; }
.ls-prog-label { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-2); font-variant-numeric: tabular-nums; }

/* QuietNotice */
.ls-notice { display: flex; align-items: center; gap: var(--space-3); box-sizing: border-box; min-height: var(--tap-min); width: 100%; padding: 0 var(--space-1); background: none; border: 0; border-radius: var(--radius-md); font: inherit; font-size: 15px; line-height: 21px; color: var(--ink-muted); text-align: left; cursor: pointer; }
.ls-notice-text { flex: 1; }
.ls-notice .ls-icon { color: var(--ink-muted); }

/* SessionBar */
.ls-sbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 56px; flex: none; }
.ls-end { justify-self: start; appearance: none; border: 0; background: none; padding: 0; margin-left: -6px; min-height: var(--tap-min); min-width: var(--tap-min); display: grid; place-items: center start; cursor: pointer; font: inherit; border-radius: var(--radius-full); }
.ls-end-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--surface-muted); font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.ls-sbar-ctx { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }
.ls-sbar-count { justify-self: end; font-size: 15px; line-height: 20px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* SourceLine + QuestionStem */
.ls-src { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ls-src-source { font-weight: 600; }
.ls-src-again { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); margin-top: 2px; }
.ls-stem { font-size: 19px; line-height: 28px; margin: var(--space-3) 0 var(--space-6); text-wrap: pretty; color: var(--ink); }

/* Option (MCQ) */
.ls-opts { display: flex; flex-direction: column; gap: var(--space-3); }
.ls-opt { display: flex; align-items: flex-start; gap: var(--space-3); box-sizing: border-box; width: 100%; min-height: var(--row-min); padding: 14px var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); text-align: left; font: inherit; font-size: 17px; line-height: 24px; color: var(--ink); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ls-opt-letter { box-sizing: border-box; flex: none; width: 26px; height: 26px; margin-top: -1px; border-radius: var(--radius-full); border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; line-height: 1; font-weight: 600; color: var(--ink-muted); }
.ls-opt-text { flex: 1; min-width: 0; }
.ls-opt-tag { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 600; }
.ls-opt--correct, .ls-opt--yours { background: var(--accent-soft); border-color: var(--accent); }
.ls-opt--correct .ls-opt-letter, .ls-opt--yours .ls-opt-letter { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ls-opt--correct .ls-opt-tag, .ls-opt--yours .ls-opt-tag { color: var(--accent); }
.ls-opt--wrong { background: var(--missed-soft); border-color: var(--missed); }
.ls-opt--wrong .ls-opt-letter { background: var(--missed); border-color: var(--missed); color: var(--on-missed); }
.ls-opt--wrong .ls-opt-tag { color: var(--missed); }
.ls-opt--dim { color: var(--ink-muted); cursor: default; }
.ls-opt--static { cursor: default; background: transparent; border-color: transparent; padding: var(--space-1) 0; min-height: 0; }
.ls-opts--static { gap: var(--space-2); }

/* AnswerBlock */
.ls-ans { box-sizing: border-box; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); padding: var(--space-4); }
.ls-ans-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.ls-ans-label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); }
.ls-tag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px dashed var(--line-strong); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.ls-tag .ls-icon { color: var(--ink-muted); }
.ls-ans-body { font-size: 17px; line-height: 26px; color: var(--ink); }
.ls-ans-body p { margin: 0 0 var(--space-2); }
.ls-ans-body p:last-child { margin-bottom: 0; }
.ls-ans-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.ls-ans--none { background: transparent; border: 1px dashed var(--line-strong); display: flex; gap: var(--space-3); align-items: flex-start; }
.ls-ans--none .ls-icon { color: var(--ink-muted); margin-top: 1px; }
.ls-ans-none-title { font-size: 17px; line-height: 24px; font-weight: 600; }
.ls-ans-none-body { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin-top: 2px; }

/* MarkButtons */
.ls-mark { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* SummaryCard */
.ls-sum { box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.ls-sum-title { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0 0 var(--space-4); }
.ls-sum-dl { margin: 0; }
.ls-sum-row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-3) 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 24px; }
.ls-sum-row dt { color: var(--ink-muted); }
.ls-sum-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ls-sum-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin: var(--space-3) 0 0; }
.ls-sum-action { margin-top: var(--space-6); }

/* EmptyState */
.ls-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-8) var(--space-4); max-width: 340px; margin: 0 auto; }
.ls-empty--start { align-items: flex-start; text-align: left; margin: 0; padding-left: 0; padding-right: 0; }
.ls-empty-icon { color: var(--ink-muted); margin-bottom: var(--space-2); }
.ls-empty-title { font-size: 20px; line-height: 26px; font-weight: 600; margin: 0; }
.ls-empty-body { font-size: 15px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.ls-empty-action { margin-top: var(--space-4); }

/* ImportCard */
.ls-imp { box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.ls-imp-head { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-2); }
.ls-imp-head .ls-icon { color: var(--ink-muted); margin-top: 1px; }
.ls-imp-file { font-size: 17px; line-height: 22px; font-weight: 600; word-break: break-word; }
.ls-imp-when { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: 2px; }
.ls-imp-dl { margin: 0; }
.ls-imp-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 21px; }
.ls-imp-row dt { color: var(--ink-muted); }
.ls-imp-row dd { margin: 0; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.ls-imp-action { margin-top: var(--space-2); }

/* Sheet */
.ls-sheet-layer { position: absolute; inset: 0; z-index: 5; }
.ls-sheet-scrim { position: absolute; inset: 0; background: var(--scrim); }
.ls-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-sheet); padding-bottom: var(--safe-bottom, 0px); overflow: hidden; }
.ls-sheet-grab { width: 36px; height: 5px; border-radius: var(--radius-full); background: var(--line-strong); margin: var(--space-2) auto var(--space-1); flex: none; }
.ls-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-2) 0 var(--space-5); min-height: 52px; flex: none; }
.ls-sheet-title { font-size: 17px; line-height: 22px; font-weight: 600; }
.ls-sheet-body { overflow: hidden; padding: 0 var(--space-5) var(--space-4); flex: 1; min-height: 0; }
.ls-sheet-body .ls-list { border-radius: var(--radius-md); }

/* ---------- Screen layout (used by the reference screens) ---------- */
.ls-app { position: relative; display: flex; width: 100%; height: 100%; background: var(--bg); overflow: hidden; box-sizing: border-box; }
.ls-app--phone { flex-direction: column; padding-top: var(--safe-top, 0px); }
.ls-app--pad { flex-direction: row; padding-top: var(--safe-top, 0px); }
.ls-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ls-app-top { flex: none; padding: 0 var(--space-5); }
.ls-app-body { flex: 1; min-height: 0; overflow: hidden; padding: 0 var(--space-5); display: flex; flex-direction: column; }
.ls-app-bottom { flex: none; padding: var(--space-3) var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.ls-app--phone.ls-app--nonav .ls-app-bottom { padding-bottom: calc(var(--safe-bottom, 0px) + var(--space-1)); }
.ls-app--pad .ls-app-top, .ls-app--pad .ls-app-body, .ls-app--pad .ls-app-bottom { padding-left: var(--space-12); padding-right: var(--space-12); }
.ls-app--pad .ls-app-bottom { padding-bottom: calc(var(--safe-bottom, 0px) + var(--space-4)); }
.ls-app--pad .ls-app-main > .ls-app-body:first-child { padding-top: var(--space-8); }
.ls-app--pad .ls-app-top { padding-top: var(--space-4); }
.ls-col { width: 100%; max-width: var(--column-list); margin: 0 auto; box-sizing: border-box; }
.ls-col--read { max-width: var(--column-read); }
.ls-col--narrow { max-width: 440px; }
.ls-col--home { max-width: 560px; }
.ls-col--fill { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ls-spacer { flex: 1; min-height: var(--space-4); }
.ls-bottom-caption { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }
.ls-hint { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin: 0 0 var(--space-5); }
.ls-kicker { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.ls-due { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; margin: var(--space-1) 0 0; }
.ls-due-sub { font-size: 15px; line-height: 21px; color: var(--ink-muted); margin: var(--space-2) 0 0; max-width: 34em; }
.ls-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); padding: 0 var(--space-12); }
.ls-pane { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.ls-card { box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.ls-drop { box-sizing: border-box; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); }
.ls-drop .ls-icon { color: var(--ink-muted); }
.ls-drop-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); max-width: 300px; }
.ls-result { font-size: 15px; line-height: 21px; color: var(--ink-muted); display: flex; gap: var(--space-2); align-items: flex-start; }
.ls-result .ls-icon { margin-top: 1px; }
.ls-result--missed .ls-icon { color: var(--missed); }
.ls-result--ok .ls-icon { color: var(--accent); }
.ls-signin-name { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.ls-signin-tag { font-size: 17px; line-height: 24px; color: var(--ink-muted); margin: var(--space-1) 0 0; }
.ls-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---------- Showcase (device frames for design previews only) ---------- */
.ls-show { display: flex; gap: 32px; padding: 20px 24px 24px; align-items: flex-start; font-family: var(--font-sans); }
.ls-show--stack { flex-direction: column; gap: 28px; }
.ls-show-item { display: flex; flex-direction: column; gap: 10px; flex: none; }
.ls-show-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); padding-left: 4px; }
.ls-dev { position: relative; flex: none; background: #0c0d0e; box-shadow: 0 0 0 1px var(--line); }
.ls-dev--phone { box-sizing: content-box; width: 390px; height: 844px; padding: 6px; border-radius: 54px; }
.ls-dev--pad { box-sizing: content-box; width: 1180px; height: 820px; padding: 10px; border-radius: 30px; }
.ls-dev-screen { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
.ls-dev--phone .ls-dev-screen { border-radius: 48px; --safe-top: 54px; --safe-bottom: 30px; }
.ls-dev--pad .ls-dev-screen { border-radius: 20px; --safe-top: 26px; --safe-bottom: 14px; }
.ls-status { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; pointer-events: none; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ls-dev--phone .ls-status { height: 54px; padding: 4px 30px 0 44px; font-size: 16px; box-sizing: border-box; }
.ls-dev--pad .ls-status { height: 26px; padding: 0 22px; font-size: 13px; box-sizing: border-box; }
.ls-status-right { display: flex; align-items: center; gap: 6px; }
.ls-island { position: absolute; top: 11px; left: 50%; width: 122px; height: 35px; margin-left: -61px; border-radius: 20px; background: #0c0d0e; z-index: 5; }
.ls-home-ind { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: var(--ink); z-index: 6; opacity: .9; }
.ls-dev--pad .ls-home-ind { width: 200px; margin-left: -100px; bottom: 6px; }