/* Shared Web reference primitives. Import generated/tokens.css first.
   Scoped opt-in; no global override of existing production components. */
.lw-ui { color:var(--lw-ds-ink); background:var(--lw-ds-paper); font:400 var(--lw-ds-type-body-size)/var(--lw-ds-type-body-line) var(--lw-ds-font-interface); }
.lw-ui *, .lw-ui *::before, .lw-ui *::after { box-sizing:border-box; }
.lw-ui ::selection { color:var(--lw-ds-ink); background:var(--lw-ds-sage); }
.lw-ui :is(input,textarea) { caret-color:var(--lw-ds-accent-text); }
.lw-ui :where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid var(--lw-ds-accent-text); outline-offset:4px; }
.lw-ui a { color:var(--lw-ds-accent-text); text-underline-offset:4px; text-decoration-thickness:1px; }
.lw-ui button, .lw-ui input, .lw-ui select { font:inherit; }
.lw-ui img { max-width:100%; display:block; }
.lw-ui h1, .lw-ui h2, .lw-ui h3, .lw-ui p { margin-block:0; }
.lw-ui h1 { font:400 clamp(2.25rem,5vw,var(--lw-ds-type-display-size))/var(--lw-ds-type-display-line) var(--lw-ds-font-editorial); letter-spacing:-.03em; text-wrap:balance; }
.lw-ui h2 { font:400 var(--lw-ds-type-heading-size)/var(--lw-ds-type-heading-line) var(--lw-ds-font-editorial); letter-spacing:-.02em; text-wrap:balance; }
.lw-ui h3 { font:600 var(--lw-ds-type-title-size)/var(--lw-ds-type-title-line) var(--lw-ds-font-interface); letter-spacing:-.01em; }
.lw-ui :is(h1,h2,h3,p) { overflow-wrap:anywhere; }
.lw-ui p { text-wrap:pretty; }
.lw-ui .lw-muted { color:var(--lw-ds-muted); }
.lw-ui .lw-meta { font-size:var(--lw-ds-type-metadata-size); line-height:var(--lw-ds-type-metadata-line); }
.lw-ui .lw-hanzi { font:400 var(--lw-ds-type-hanzi-size)/var(--lw-ds-type-hanzi-line) var(--lw-ds-font-hanzi); letter-spacing:normal; }
.lw-ui .lw-pinyin { font:italic var(--lw-ds-type-pinyin-size)/var(--lw-ds-type-pinyin-line) var(--lw-ds-font-editorial); letter-spacing:normal; }
.lw-ui .lw-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--lw-ds-target); padding:12px 20px; border:1px solid transparent; border-radius:var(--lw-ds-radius-web-control); color:var(--lw-ds-on-action); background:var(--lw-ds-action-fill); font:600 var(--lw-ds-type-label-size)/var(--lw-ds-type-label-line) var(--lw-ds-font-interface); text-align:center; text-decoration:none; cursor:pointer; transition:background var(--lw-ds-feedback-duration) var(--lw-ds-ease); }
.lw-ui .lw-button:hover:not(:disabled) { background:var(--lw-ds-action-hover); }
.lw-ui .lw-button:active:not(:disabled) { filter:brightness(.94); }
.lw-ui .lw-button--secondary { background:var(--lw-ds-surface); border-color:var(--lw-ds-muted); color:var(--lw-ds-accent-text); }
.lw-ui .lw-button--secondary:hover:not(:disabled) { background:var(--lw-ds-field); }
.lw-ui .lw-button:disabled { color:var(--lw-ds-muted); background:var(--lw-ds-surface); border-color:var(--lw-ds-line); cursor:not-allowed; }
.lw-ui .lw-button[aria-busy="true"] { cursor:wait; }
.lw-ui .lw-icon { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lw-ui .lw-field { display:grid; gap:8px; }
.lw-ui .lw-field label { font:600 var(--lw-ds-type-label-size)/1.4 var(--lw-ds-font-interface); }
.lw-ui .lw-field :is(input,textarea,select) { width:100%; min-height:var(--lw-ds-target); padding:12px 16px; color:var(--lw-ds-ink); background:var(--lw-ds-field); border:1px solid var(--lw-ds-muted); border-radius:var(--lw-ds-radius-web-control); }
.lw-ui .lw-field input::placeholder { color:var(--lw-ds-muted); opacity:1; }
.lw-ui .lw-field [aria-invalid="true"] { border-color:var(--lw-ds-danger); }
.lw-ui .lw-error { color:var(--lw-ds-danger); font-size:var(--lw-ds-type-metadata-size); }
.lw-ui .lw-feedback { padding-block:12px; display:flex; gap:10px; align-items:flex-start; }
.lw-ui .lw-feedback--positive { color:var(--lw-ds-positive); }
.lw-ui .lw-feedback--error { color:var(--lw-ds-danger); }
.lw-ui .lw-chips { display:flex; gap:8px; flex-wrap:wrap; }
.lw-ui .lw-chip { min-height:var(--lw-ds-target); padding:8px 14px; display:inline-flex; gap:8px; align-items:center; border:1px solid var(--lw-ds-muted); border-radius:var(--lw-ds-radius-web-control); background:var(--lw-ds-surface); color:var(--lw-ds-ink); font-size:var(--lw-ds-type-label-size); cursor:pointer; }
.lw-ui .lw-chip[aria-pressed="true"] { background:var(--lw-ds-sage); border-color:var(--lw-ds-accent-text); font-weight:600; }
.lw-ui .lw-chip[aria-pressed="true"]::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; }
.lw-ui .lw-cell { display:flex; position:relative; isolation:isolate; overflow:hidden; border-radius:var(--lw-ds-radius-web-card); background:var(--cell-bg,var(--lw-ds-surface)); color:var(--cell-ink,var(--lw-ds-ink)); text-decoration:none; }
.lw-ui .lw-cell:focus-visible { outline-color:var(--lw-ds-accent-text); }
.lw-ui .lw-cell[href]:hover { filter:brightness(.97); }
.lw-ui .lw-cell[href]:active { filter:brightness(.94); }
.lw-ui .lw-cell__body { flex:1; min-width:0; padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.lw-ui .lw-cell__body :is(h3,p) { overflow-wrap:anywhere; }
.lw-ui .lw-cell__body h3 { font:400 var(--lw-ds-type-title-size)/1.3 var(--lw-ds-font-editorial); letter-spacing:-.02em; }
.lw-ui .lw-cell__detail { font-size:var(--lw-ds-type-label-size); line-height:1.5; }
.lw-ui .lw-cell__action { display:flex; align-items:center; gap:10px; margin-block-start:auto; padding-block-start:8px; color:var(--cell-ink,var(--lw-ds-accent-text)); font-size:var(--lw-ds-type-label-size); font-weight:600; }
.lw-ui .lw-cell__action .lw-icon { color:var(--cell-accent,var(--lw-ds-accent-text)); }
.lw-ui .lw-cell__image { position:absolute; inset-block:0; inset-inline-end:0; width:40%; height:100%; object-fit:cover; object-position:center; mask-image:linear-gradient(to right,transparent,#000 25%); }
.lw-ui .lw-cell--illustrated .lw-cell__body { flex:0 0 60%; min-height:240px; }
.lw-ui:dir(rtl) .lw-cell__image { mask-image:linear-gradient(to left,transparent,#000 25%); }
.lw-ui .lw-cell--illustrated { min-height:240px; border-radius:var(--lw-ds-radius-web-feature); }
.lw-ui .lw-cell--quiet { border:1px solid var(--lw-ds-line); }
.lw-ui .lw-cell--quiet .lw-cell__body h3 { font-size:var(--lw-ds-type-title-size); }
.lw-ui .lw-cell--pastel .lw-cell__body { padding:20px; gap:8px; }
.lw-ui .lw-cell--pastel .lw-cell__body h3 { font:400 var(--lw-ds-type-title-size)/1.3 var(--lw-ds-font-editorial); letter-spacing:-.02em; }
.lw-ui .lw-cell--pastel .lw-cell__top { display:flex; align-items:center; justify-content:space-between; align-self:stretch; margin-block-end:8px; }
.lw-ui .lw-word-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; padding-block:20px; border-bottom:1px solid var(--lw-ds-line); align-items:center; }
.lw-ui .lw-word-row__actions { display:flex; gap:8px; }
.lw-ui .lw-word-row__text { display:grid; gap:2px; min-width:0; }
.lw-ui .lw-reading { max-width:var(--lw-ds-reading-measure); }
.lw-ui .lw-reading > * + * { margin-block-start:16px; }
.lw-ui .lw-disclosure { border-block:1px solid var(--lw-ds-line); padding-block:8px; }
.lw-ui .lw-disclosure summary { min-height:var(--lw-ds-target); padding-block:10px; cursor:pointer; color:var(--lw-ds-accent-text); }
.lw-ui .lw-disclosure > :not(summary) { margin-block:12px; }
.lw-ui .lw-numeral { font-variant-numeric:tabular-nums; }
.lw-ui .lw-select, .lw-ui .lw-field .lw-select { appearance:none; min-height:var(--lw-ds-target); max-width:100%; padding:10px 44px 10px 16px; border:1px solid var(--lw-ds-muted); border-radius:var(--lw-ds-radius-web-control); color:var(--lw-ds-ink); background-color:var(--lw-ds-field); background-image:var(--lw-ds-select-icon); background-repeat:no-repeat; background-size:16px; background-position:right 14px center; font:400 var(--lw-ds-type-label-size)/1.5 var(--lw-ds-font-interface); }
.lw-ui:dir(rtl) .lw-select { background-position:left 14px center; }
.lw-ui .lw-select:disabled { background:var(--lw-ds-surface); color:var(--lw-ds-muted); }
.lw-ui .lw-nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; padding-block:16px; border-block:1px solid var(--lw-ds-line); }
.lw-ui .lw-nav__links { display:flex; flex-wrap:wrap; gap:4px 24px; }
.lw-ui .lw-nav a { min-height:var(--lw-ds-target); display:inline-flex; align-items:center; font-size:var(--lw-ds-type-label-size); text-decoration:none; }
.lw-ui .lw-nav a[aria-current="page"] { text-decoration:underline; font-weight:600; }
.lw-ui .lw-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--lw-ds-line); }
.lw-ui .lw-tabs [role="tab"] { padding:12px 16px; min-height:var(--lw-ds-target); border:0; border-bottom:2px solid transparent; background:transparent; color:var(--lw-ds-muted); font-size:var(--lw-ds-type-label-size); cursor:pointer; }
.lw-ui .lw-tabs [aria-selected="true"] { color:var(--lw-ds-accent-text); border-bottom-color:var(--lw-ds-accent-text); font-weight:600; }
.lw-ui .lw-tabpanel { padding-block:20px; }
.lw-ui .lw-menu { position:relative; display:inline-block; max-width:100%; }
.lw-ui .lw-menu__panel { position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:10; min-width:var(--lw-ds-menu-min-width); max-width:min(320px,calc(100vw - 40px)); max-height:22rem; overflow-y:auto; padding:var(--lw-ds-menu-padding); background:var(--lw-ds-field); color:var(--lw-ds-ink); border-radius:var(--lw-ds-radius-web-control); box-shadow:0 8px 28px #24332c26; }
.lw-ui .lw-menu__panel [role^="menuitem"] { display:flex; align-items:center; gap:12px; width:100%; min-height:var(--lw-ds-target); padding:10px 12px; border:0; border-radius:var(--lw-ds-menu-item-radius); background:transparent; color:var(--lw-ds-ink); font:400 var(--lw-ds-type-label-size)/1.5 var(--lw-ds-font-interface); text-align:start; overflow-wrap:anywhere; cursor:pointer; }
.lw-ui .lw-menu__panel [role^="menuitem"]:is(:hover,:focus-visible) { background:var(--lw-ds-sage); outline-offset:-3px; }
.lw-ui .lw-menu__panel [aria-checked="true"] { font-weight:600; }
.lw-ui .lw-menu__panel [aria-checked="true"]::after { content:""; width:6px; height:11px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(45deg); margin-inline-start:auto; margin-inline-end:4px; flex:none; }
.lw-ui .lw-menu__panel :disabled { color:var(--lw-ds-muted); cursor:not-allowed; }
.lw-ui .lw-icon-button { width:var(--lw-ds-target); height:var(--lw-ds-target); display:inline-grid; place-items:center; border:1px solid var(--lw-ds-muted); border-radius:var(--lw-ds-radius-web-control); color:var(--lw-ds-accent-text); background:var(--lw-ds-surface); cursor:pointer; }
.lw-ui .lw-icon-button:hover { background:var(--lw-ds-field); }
.lw-ui .lw-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.lw-ui .lw-choice { display:flex; align-items:center; gap:12px; min-height:var(--lw-ds-target); font-size:var(--lw-ds-type-label-size); cursor:pointer; }
.lw-ui .lw-choice input { width:20px; height:20px; margin:0; accent-color:var(--lw-ds-action-fill); flex:none; }
.lw-ui .lw-switch { display:flex; align-items:center; gap:12px; min-height:var(--lw-ds-target); font-size:var(--lw-ds-type-label-size); cursor:pointer; }
.lw-ui .lw-switch input { appearance:none; width:44px; height:26px; border:1px solid var(--lw-ds-muted); border-radius:13px; background:var(--lw-ds-surface); margin:0; position:relative; flex:none; }
.lw-ui .lw-switch input::before { content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; width:18px; height:18px; border-radius:50%; background:var(--lw-ds-muted); transition:inset-inline-start var(--lw-ds-feedback-duration) var(--lw-ds-ease); }
.lw-ui .lw-switch input:checked { background:var(--lw-ds-action-fill); border-color:var(--lw-ds-action-fill); }
.lw-ui .lw-switch input:checked::before { inset-inline-start:21px; background:var(--lw-ds-on-action); }
.lw-ui .lw-cell--app .lw-cell__body h3 { font:400 var(--lw-ds-type-title-size)/1.3 var(--lw-ds-font-editorial); letter-spacing:0; }
.lw-ui .lw-practice-card { display:block; padding:24px; border-radius:var(--lw-ds-radius-web-feature); }
.lw-ui .lw-practice-card h3 { font:400 var(--lw-ds-type-title-size)/1.3 var(--lw-ds-font-editorial); }
.lw-ui .lw-practice-card__header { display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.lw-ui .lw-practice-card__filter { padding:8px 12px; border:1px solid currentColor; border-radius:var(--lw-ds-radius-web-control); color:inherit; background:transparent; font-size:var(--lw-ds-type-label-size); }
.lw-ui .lw-feature-select { position:relative; display:inline-flex; align-items:center; max-width:100%; }
.lw-ui .lw-feature-select .lw-select { background-color:#0000001a; background-image:none; color:var(--cell-ink); border-color:#ffffff66; border-radius:var(--lw-ds-radius-feature-action); }
.lw-ui .lw-feature-select > .lw-icon { position:absolute; inset-inline-end:14px; pointer-events:none; color:var(--cell-ink); }
.lw-ui .lw-metric-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-block:24px; }
.lw-ui .lw-metric-strip div { display:grid; gap:4px; min-width:0; }
.lw-ui .lw-metric-strip dt { grid-row:2; font:400 var(--lw-ds-type-metadata-size)/1.5 var(--lw-ds-font-interface); overflow-wrap:anywhere; }
.lw-ui .lw-metric-strip dd { margin:0; font:600 var(--lw-ds-type-metric-size)/1.2 var(--lw-ds-font-interface); font-variant-numeric:tabular-nums; color:var(--cell-accent); }
.lw-ui .lw-feature-action { display:inline-flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:12px 16px; border:0; border-radius:var(--lw-ds-radius-web-control); background:var(--cell-action-fill); color:var(--cell-action-ink); text-decoration:none; font:600 var(--lw-ds-type-label-size)/1.5 var(--lw-ds-font-interface); max-width:100%; overflow-wrap:anywhere; }
.lw-ui .lw-feature-action:hover { filter:brightness(.97); }
.lw-ui .lw-practice-card > .lw-feature-action { width:100%; }
.lw-ui .lw-tool-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-block-start:12px; }
.lw-ui .lw-tool-tile { display:grid; justify-items:center; align-content:start; gap:8px; padding:12px 8px; min-height:var(--lw-ds-card-tool-min-height); border:1px solid var(--lw-ds-line); border-radius:var(--lw-ds-radius-web-control); background:var(--lw-ds-surface); color:var(--lw-ds-accent-text); font-size:var(--lw-ds-type-metadata-size); line-height:1.4; text-align:center; text-decoration:none; overflow-wrap:anywhere; }
.lw-ui .lw-destination-row { border-radius:var(--lw-ds-radius-native-row); display:flex; align-items:flex-start; gap:var(--lw-ds-card-gap); min-height:var(--lw-ds-card-compact-min-height); padding:var(--lw-ds-card-compact-padding); }
.lw-ui .lw-destination-row .lw-icon { margin-block-start:3px; }
.lw-ui .lw-destination-row__text { flex:1; min-width:0; display:grid; gap:4px; }
.lw-ui .lw-destination-row__text strong { font:600 var(--lw-ds-type-body-size)/1.4 var(--lw-ds-font-interface); overflow-wrap:anywhere; }
.lw-ui .lw-destination-row__text span { font:400 var(--lw-ds-type-metadata-size)/1.5 var(--lw-ds-font-interface); overflow-wrap:anywhere; }
.lw-ui .lw-live-card { padding:24px; gap:16px; align-items:center; border-radius:var(--lw-ds-radius-web-feature); }
.lw-ui .lw-live-card__body { display:grid; gap:12px; min-width:0; flex:1; }
.lw-ui .lw-live-card h3 { font:400 var(--lw-ds-type-title-size)/1.3 var(--lw-ds-font-editorial); color:var(--cell-accent); }
.lw-ui .lw-live-card .lw-feature-action { border-radius:var(--lw-ds-radius-feature-action); justify-self:start; }
html[data-lw-text-scale="1.5"] .lw-ui .lw-metric-strip, html[data-lw-text-scale="2"] .lw-ui .lw-metric-strip { grid-template-columns:1fr; }
@media(max-width:650px) { .lw-ui .lw-cell__body { padding:20px; } .lw-ui .lw-cell--illustrated { min-height:220px; } }
@media(max-width:440px) { .lw-ui .lw-word-row { grid-template-columns:1fr; gap:12px; } .lw-ui .lw-word-row__actions { justify-self:start; } .lw-ui .lw-cell--illustrated { flex-direction:column-reverse; } .lw-ui .lw-cell--illustrated .lw-cell__body { flex:auto; min-height:0; } .lw-ui .lw-cell--illustrated .lw-cell__image { position:static; width:100%; height:auto; aspect-ratio:3/2; mask-image:none; } }
@media(forced-colors:active) { .lw-ui .lw-cell { border:1px solid CanvasText; } .lw-ui .lw-cell__action { color:LinkText; } .lw-ui .lw-chip[aria-pressed="true"] { outline:2px solid Highlight; } }

@media(max-width:440px) { .lw-ui .lw-live-card { padding:20px; } }

.lw-ui .lw-cell--resource { border-radius:var(--lw-ds-radius-web-resource); min-height:180px; }
.lw-ui .lw-cell--resource .lw-cell__body { min-height:180px; padding:20px; }
.lw-ui .lw-cell--resource .lw-cell__body .lw-hanzi { font-family:var(--lw-ds-font-hanzi); }

/* Purposeful color accents; never recolor the heading or the whole sibling group. */
.lw-ui .lw-destination-row__symbol { width:36px; height:36px; border-radius:12px; display:grid; place-items:center; flex:none; }
.lw-ui .lw-destination-row__symbol .lw-icon { margin:0; }
.lw-ui [data-lw-accent="saved"] { background:var(--lw-ds-accent-saved-fill); color:var(--lw-ds-accent-saved-ink); }
.lw-ui [data-lw-accent="reading"] { background:var(--lw-ds-accent-reading-fill); color:var(--lw-ds-accent-reading-ink); }
.lw-ui [data-lw-accent="grammar"] { background:var(--lw-ds-accent-grammar-fill); color:var(--lw-ds-accent-grammar-ink); }

/* Quiet destination: no card fill when a simple link is enough. */
.lw-ui .lw-destination-link { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:20px; min-height:74px; border-bottom:1px solid var(--lw-ds-line); color:var(--lw-ds-ink); text-decoration:none; }
.lw-ui .lw-destination-link > span { display:grid; gap:4px; min-width:0; }
.lw-ui .lw-destination-link strong { font:600 var(--lw-ds-type-body-size)/1.4 var(--lw-ds-font-interface); }
.lw-ui .lw-destination-link span span { font:400 var(--lw-ds-type-metadata-size)/1.5 var(--lw-ds-font-interface); color:var(--lw-ds-muted); }
.lw-ui .lw-live-card .lw-feature-action { width:auto; margin:4px 0 0; }
.lw-ui .lw-live-card h3 { font-size:var(--lw-ds-type-title-size); line-height:1.3; max-width:none; }