/* Shared theme sample. Text and lock space are reserved in every state. */
:root{
 .local-protection-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:48px;padding:32px;align-items:center}
 .local-benefits h3{font-size:27px;line-height:1.18;letter-spacing:-.035em;font-weight:500;margin:0 0 24px;max-width:320px}
 .local-benefits ul{list-style:none;padding:0;margin:0;display:grid;gap:19px}
 .local-benefits li{display:flex;align-items:center;gap:15px}
 .local-benefits p{font-size:14px;line-height:1.65;margin:0;max-width:300px;color:#46503e}
 .benefit-icon{width:38px;height:38px;flex:none;fill:none;stroke:#39472c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 .benefit-accent{fill:#c9f36b}
 .obfuscation-sample{min-width:0;border:1px solid #d1d8c9;border-radius:10px;background:#fafafa;overflow:hidden}
 .obfuscation-sample h4{font-size:14px;font-weight:500;margin:0;padding:17px 20px;background:#f5f5f5;border-bottom:1px solid #d9dfd2}
 .animated-record{margin:0;padding:5px 20px}
 .animated-record>div{display:grid;grid-template-columns:65px minmax(0,1fr);gap:12px;align-items:start;align-content:center;min-height:57px;border-bottom:1px solid #e5e8e0;font:11px/1.6 var(--mono)}
 .animated-record>div:last-child{border:0}
 .animated-record dt{color:#68735c;padding-block:5px;overflow-wrap:anywhere}.animated-record dd{display:flex;margin:0;min-width:0;color:#34472a}
 .obfuscation-value{display:inline-flex;align-items:center;gap:7px;max-width:100%;padding:5px 7px;border-radius:5px;background:transparent;transition:background-color .2s ease}
 .obfuscation-value.is-protected{background:#e5efda}
 .value-copy{display:grid;position:relative;min-width:0;font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}
 .value-copy>span{grid-area:1/1;overflow-wrap:anywhere;word-break:break-all;white-space:pre-wrap;min-width:0}
 /* Only the two immutable measurements size the text; scramble frames cannot. */
 .value-copy>[data-value-text]{position:absolute;inset:0}
 .value-measure{visibility:hidden;pointer-events:none}
 .obfuscation-value .value-lock{width:13px;height:13px;flex:none;visibility:hidden}
 .obfuscation-value.is-protected .value-lock{visibility:visible}
}
@media(max-width:1000px){:root{
 .local-protection-layout{gap:25px;padding:24px}
 .local-benefits h3{font-size:25px}.local-benefits p{font-size:13px}
 .animated-record{padding-inline:14px}.animated-record>div{grid-template-columns:56px minmax(0,1fr);gap:8px;padding-block:9px;min-height:57px}
}}
@media(max-width:640px){:root{
 .local-protection-layout{grid-template-columns:1fr;gap:28px;padding:24px 18px}
 .local-benefits h3{font-size:26px;max-width:300px;margin-bottom:22px}
 .local-benefits ul{gap:16px}.local-benefits p{font-size:14px}.benefit-icon{width:34px;height:34px}
 .animated-record{padding-inline:14px}.animated-record>div{font-size:12px}
 .animated-record dt{font-size:10px}.obfuscation-sample h4{padding:15px 18px}
}}
@media(max-width:360px){:root{
 .animated-record{padding-inline:10px}.animated-record>div{font-size:11px}
 .obfuscation-value{padding-inline:4px;gap:5px}
}}
@media(prefers-reduced-motion:reduce){.obfuscation-value,.value-copy{transition:none!important}}
@media(forced-colors:active){.obfuscation-value.is-protected{outline:1px solid CanvasText}.benefit-icon,.obfuscation-value .value-lock{stroke:CanvasText}}

/* Latin demo values share a left edge even when the keys read right-to-left. */
:root[dir="rtl"] .animated-record dd{justify-content:flex-end}