/* Laboratory controls and authored previews are scoped to this module. */
#lab-app{--lab-line:#c6d7f02b;--lab-ink:#edf3ff;--lab-muted:#a5b2c9;--lab-accent:#b4f9d4;min-width:0;color:var(--lab-ink);font-family:var(--body,Arial,sans-serif)}
#lab-app *,dialog.lab-modal *{box-sizing:border-box}
#lab-app [hidden],dialog.lab-modal [hidden]{display:none!important}
#lab-app button,#lab-app input,#lab-app select,dialog.lab-modal button{font:inherit}
#lab-app button{cursor:pointer}
#lab-app button:focus-visible,#lab-app input:focus-visible,#lab-app select:focus-visible,dialog.lab-modal button:focus-visible{outline:2px solid #b4f9d4;outline-offset:5px}
#lab-app button:disabled{cursor:default}
#lab-app .lab2-label,dialog.lab-modal .lab2-label{display:block;color:var(--lab-muted,#a5b2c9);font-size:9px;font-weight:600;line-height:1.7;letter-spacing:.13em;text-transform:uppercase}
#lab-app fieldset{border:0;padding:0;margin:0;min-width:0}
#lab-app legend{padding:0;margin-bottom:16px}
#lab-app .lab2-controls{border-top:1px solid var(--lab-line);padding-top:26px}
#lab-app .lab2-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
#lab-app .lab2-theme-option{display:block;position:relative;cursor:pointer;border-bottom:1px solid var(--lab-line);padding:15px 0 24px}
#lab-app .lab2-theme-option:has(:checked){border-color:var(--lab-accent)}
#lab-app .lab2-theme-option input,#lab-app .lab2-palette input{position:absolute;opacity:0;width:1px;height:1px}
#lab-app .lab2-theme-option:has(:focus-visible),#lab-app .lab2-palette:has(:focus-visible){outline:2px solid var(--lab-accent);outline-offset:5px}
#lab-app .lab2-theme-name{display:flex;align-items:center;gap:14px;color:#8f9db5;font:500 clamp(23px,2.6vw,35px)/1.2 var(--display,Arial,sans-serif);letter-spacing:-.04em;transition:color .2s}
#lab-app .lab2-theme-name small{font:500 8px var(--body,Arial,sans-serif);letter-spacing:.03em;color:#8291aa}
#lab-app .lab2-theme-name>span{font:400 24px var(--body,Arial,sans-serif);margin-left:auto;opacity:0;transform:translate(-4px,4px);transition:opacity .2s,transform .2s}
#lab-app .lab2-theme-option:has(:checked) .lab2-theme-name{color:var(--lab-accent)}
#lab-app .lab2-theme-option:has(:checked) .lab2-theme-name>span{opacity:1;transform:none}
#lab-app .lab2-theme-option:hover .lab2-theme-name{color:#e5f4ec}
#lab-app .lab2-theme-note{display:block;font-size:11px;line-height:1.7;color:#9ba9c1;margin:11px 0 0 26px}
#lab-app .lab2-context{display:grid;grid-template-columns:.8fr 1fr 1.2fr;align-items:start;gap:35px;padding:32px 0 37px}
#lab-app .lab2-field{display:block;min-width:0}
#lab-app .lab2-field>select,#lab-app .lab2-field>input{display:block;min-width:0;width:100%;border:0;border-bottom:1px solid #536078;background:transparent;color:#f0f4ff;min-height:48px;border-radius:0;padding:10px 0;font-size:14px;line-height:1.4;color-scheme:dark}
#lab-app .lab2-field>input::placeholder{color:#8290aa}
#lab-app .lab2-field>select{padding-right:20px;cursor:pointer}
#lab-app .lab2-field-note{display:block;margin-top:7px;color:#8f9db4;font-size:10px;line-height:1.6}
#lab-app .lab2-optional{letter-spacing:0;font-size:9px;text-transform:none;color:#8290a8}
#lab-app .lab2-palette-field legend{margin-bottom:10px}
#lab-app .lab2-palettes{display:flex;gap:17px;align-items:center;flex-wrap:wrap}
#lab-app .lab2-palette{position:relative;display:flex;align-items:center;gap:7px;min-height:41px;cursor:pointer;color:#94a3bd;font-size:10px}
#lab-app .lab2-palette:has(:checked){color:#edf5ff}
#lab-app .lab2-palette-dot{display:block;width:24px;height:24px;border-radius:50%;border:1px solid #cad7f044;box-shadow:0 0 0 3px #0b0e1c,0 0 0 4px transparent;transition:box-shadow .2s}
#lab-app .lab2-palette:has(:checked) .lab2-palette-dot{box-shadow:0 0 0 3px #0b0e1c,0 0 0 4px #b4f9d4}
#lab-app .lab2-preview-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 0;border-top:1px solid var(--lab-line)}
#lab-app .lab2-preview-label{display:flex;align-items:center;gap:9px;color:#acbad2;font-size:10px;line-height:1.5}
#lab-app .lab2-live-dot{width:5px;height:5px;background:var(--lab-accent);border-radius:50%;flex-shrink:0}
#lab-app .lab2-preview-actions{display:flex;gap:22px;align-items:center}
#lab-app .lab2-device-group{display:flex;gap:2px;background:#ffffff05;border:1px solid #bdcbe022;padding:3px;border-radius:7px}
#lab-app .lab2-device-group button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;background:transparent;padding:7px 12px;border-radius:4px;color:#94a3bd;font-size:10px}
#lab-app .lab2-device-group button[aria-pressed=true]{background:#29354b;color:#f3f7ff}
#lab-app .lab2-device-group svg{height:15px;width:15px;stroke:currentColor;fill:none;stroke-width:1.3}
#lab-app .lab2-compare-toggle{display:flex;align-items:center;gap:15px;min-height:44px;padding:7px 0;background:transparent;color:#c9d5e9;font-size:11px}
#lab-app .lab2-compare-toggle>span{font-size:20px}
#lab-app .lab2-compare-toggle[aria-pressed=true]{color:var(--lab-accent)}
#lab-app .lab2-comparison-settings{display:flex;justify-content:space-between;gap:20px;padding:10px 0 22px;align-items:center}
#lab-app .lab2-comparison-settings label{display:flex;gap:12px;align-items:center;font-size:11px;color:#a8b7d0}
#lab-app .lab2-comparison-settings select{background:#172136;color:#e8f3ff;border:1px solid #6a7e9a55;border-radius:5px;min-height:40px;padding:7px 30px 7px 10px;font-size:12px;color-scheme:dark}
#lab-app .lab2-comparison-settings>p{font-size:10px;color:#92a3bd}
#lab-app .lab2-preview-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
#lab-app .lab2-deck[data-compare=true] .lab2-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#lab-app .lab2-pane{min-width:0}
#lab-app .lab2-frame,dialog.lab-modal .lab2-frame{width:100%;min-width:0;border:1px solid #7d8da74d;border-radius:10px;overflow:hidden;background:#101b33;box-shadow:0 25px 60px #0003;container:lab-preview / inline-size;margin-inline:auto}
#lab-app .lab2-frame[data-device=mobile],dialog.lab-modal .lab2-frame[data-device=mobile]{max-width:360px;border-width:5px;border-color:#303c51;border-radius:25px}
#lab-app .lab2-browser-bar,dialog.lab-modal .lab2-browser-bar{display:flex;align-items:center;gap:14px;background:#182133;color:#bac6db;border-bottom:1px solid #dde9ff12;padding:9px 14px;min-height:45px;font-size:9px;letter-spacing:.03em;line-height:1.5}
#lab-app .lab2-browser-dots,dialog.lab-modal .lab2-browser-dots{display:flex;gap:4px}
#lab-app .lab2-browser-dots i,dialog.lab-modal .lab2-browser-dots i{display:block;height:4px;width:4px;background:#6b7d99;border-radius:50%}
#lab-app .lab2-browser-separator,dialog.lab-modal .lab2-browser-separator{margin:0 5px;color:#73839f}
#lab-app .lab2-browser-bar>button{margin-left:auto;background:transparent;display:flex;gap:7px;align-items:center;color:#cbd9ef;padding:4px 0 4px 8px;min-height:28px;font-size:9px}
#lab-app .lab2-browser-bar svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.1;fill:none}
#lab-app .lab2-browser-study,dialog.lab-modal .lab2-browser-study{margin-left:auto;letter-spacing:.12em;font-size:7px;color:#9aaecb}
#lab-app .lab2-compare-tabs{display:none}
#lab-app .lab2-adopt{background:transparent;color:var(--lab-accent);font-size:11px;padding:14px 2px 4px;min-height:44px;display:flex;align-items:center;gap:14px;text-align:left}
#lab-app .lab2-caption{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-top:21px}
#lab-app .lab2-caption>p{color:#91a0bb;font-size:11px;line-height:1.85;max-width:650px}
#lab-app .lab2-caption strong{font-weight:500;color:#c9d6e9}
#lab-app .lab2-caption-index{font-size:7px;line-height:1.6;letter-spacing:.13em;text-align:right;color:#7f91ac;white-space:nowrap}
#lab-app .lab2-footer{margin-top:32px;padding-top:25px;border-top:1px solid var(--lab-line);display:flex;gap:25px;align-items:center;justify-content:space-between}
#lab-app .lab2-selection>p{font-size:13px;color:#e3edff;line-height:1.7;margin-top:5px}
#lab-app .lab2-footer-actions{display:flex;gap:24px;align-items:center}
#lab-app .lab2-share{display:flex;gap:18px;align-items:center;background:transparent;color:#b9c8e2;font-size:11px;min-height:46px;padding:10px 0}
#lab-app .lab2-choose,dialog.lab-modal .lab2-choose{background:#b4f9d4;color:#10182a;border:1px solid #b4f9d4;border-radius:30px;font:600 12px var(--body,Arial,sans-serif);padding:14px 21px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:28px;cursor:pointer}
#lab-app .lab2-choose>span,dialog.lab-modal .lab2-choose>span{font-size:20px;font-weight:400}
#lab-app .lab2-share-fallback{margin-top:24px;padding:20px;background:#172135;border:1px solid #7e99bd44;border-radius:7px}
#lab-app .lab2-share-fallback label{display:block;font-size:12px;color:#d2def1;line-height:1.6;margin-bottom:10px}
#lab-app .lab2-share-fallback input{width:100%;background:#0b1222;color:#c7ffdf;font-size:13px;border:1px solid #8195b455;border-radius:4px;padding:12px;min-height:44px}
#lab-app .lab2-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Each direction changes layout, typography and artwork, not only its color. */
#lab-app .lab2-demo,dialog.lab-modal .lab2-demo{background:var(--demo-bg);color:var(--demo-ink);padding:28px 35px 20px;position:relative;overflow:hidden;font-family:var(--body,Arial,sans-serif)}
#lab-app .lab2-demo-nav,dialog.lab-modal .lab2-demo-nav{display:flex;align-items:center;justify-content:space-between;gap:22px;position:relative;z-index:2}
#lab-app .lab2-demo-nav>strong,dialog.lab-modal .lab2-demo-nav>strong{font:600 clamp(18px,2.4cqi,26px)/1.15 var(--display,Arial,sans-serif);letter-spacing:-.04em;max-width:60%;overflow-wrap:anywhere}
#lab-app .lab2-demo-nav>span,dialog.lab-modal .lab2-demo-nav>span{display:flex;gap:20px;align-items:center;font-size:8px;letter-spacing:.02em;color:var(--demo-muted)}
#lab-app .lab2-demo-nav i,dialog.lab-modal .lab2-demo-nav i{font-style:normal;color:var(--demo-accent);font-size:23px}
#lab-app .lab2-demo-hero,dialog.lab-modal .lab2-demo-hero{min-height:350px;display:grid;grid-template-columns:1.15fr 1fr;gap:10px;align-items:center;position:relative;padding:35px 0}
#lab-app .lab2-demo-copy,dialog.lab-modal .lab2-demo-copy{position:relative;z-index:2}
#lab-app .lab2-demo-kicker,dialog.lab-modal .lab2-demo-kicker{font-size:7px;letter-spacing:.15em;color:var(--demo-accent);line-height:1.7;font-weight:600}
#lab-app .lab2-demo h3,dialog.lab-modal .lab2-demo h3{font:500 clamp(34px,7.4cqi,88px)/.99 var(--display,Arial,sans-serif);letter-spacing:-.065em;margin:19px 0 20px;overflow-wrap:normal}
#lab-app .lab2-demo h3 em,dialog.lab-modal .lab2-demo h3 em{font-style:normal;color:var(--demo-accent)}
#lab-app .lab2-demo-description,dialog.lab-modal .lab2-demo-description{font-size:11px;line-height:1.8;color:var(--demo-muted);max-width:290px}
#lab-app .lab2-demo-cta,dialog.lab-modal .lab2-demo-cta{display:inline-flex;gap:24px;align-items:center;min-height:37px;padding:10px 14px;margin-top:23px;background:var(--demo-accent);color:var(--demo-bg);border-radius:30px;font-size:9px;font-weight:700}
#lab-app .lab2-demo-cta>span,dialog.lab-modal .lab2-demo-cta>span{font-size:16px;font-weight:400}
#lab-app .lab2-demo-art,dialog.lab-modal .lab2-demo-art{height:300px;position:relative;display:grid;place-items:center;isolation:isolate;min-width:0}
#lab-app .lab2-art-object,dialog.lab-modal .lab2-art-object{height:190px;width:190px;border-radius:50%;background:radial-gradient(circle at 28% 20%,var(--demo-accent),transparent 56%),radial-gradient(circle at 80% 80%,#000b,transparent 70%),linear-gradient(130deg,var(--demo-accent),var(--demo-bg) 75%);box-shadow:inset -12px -18px 26px #0006,0 0 65px #a7ceff17;transform:rotate(-20deg);position:absolute}
#lab-app .lab2-art-orbit,dialog.lab-modal .lab2-art-orbit{position:absolute;width:255px;height:255px;border:1px solid var(--demo-accent);opacity:.45;border-radius:50%;transform:rotate(-35deg) scaleY(.38);z-index:2}
#lab-app .lab2-art-orbit-alt,dialog.lab-modal .lab2-art-orbit-alt{width:290px;height:290px;transform:rotate(45deg) scaleY(.7);opacity:.18}
#lab-app .lab2-art-mark,dialog.lab-modal .lab2-art-mark{font:400 145px/.9 Georgia,serif;color:var(--demo-accent);position:relative;z-index:3;opacity:.8;mix-blend-mode:screen}
#lab-app .lab2-art-caption,dialog.lab-modal .lab2-art-caption{position:absolute;bottom:0;right:0;font-size:6px;letter-spacing:.16em;color:var(--demo-muted);line-height:1.6}
#lab-app .lab2-demo-details,dialog.lab-modal .lab2-demo-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:23px 0 25px;border-top:1px solid color-mix(in srgb,var(--demo-ink) 20%,transparent)}
#lab-app .lab2-demo-details>div,dialog.lab-modal .lab2-demo-details>div{min-width:0}
#lab-app .lab2-demo-details strong,dialog.lab-modal .lab2-demo-details strong{display:block;font-size:11px;font-weight:600;line-height:1.5}
#lab-app .lab2-demo-details>div>span:last-child,dialog.lab-modal .lab2-demo-details>div>span:last-child{display:block;font-size:9px;color:var(--demo-muted);line-height:1.65;margin-top:5px}
#lab-app .lab2-detail-art,dialog.lab-modal .lab2-detail-art{display:none}
#lab-app .lab2-demo-footer,dialog.lab-modal .lab2-demo-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid color-mix(in srgb,var(--demo-ink) 20%,transparent);padding-top:15px;font-size:6px;line-height:1.7;letter-spacing:.08em;color:var(--demo-muted)}

#lab-app .lab2-demo[data-theme=editorial],dialog.lab-modal .lab2-demo[data-theme=editorial]{padding-top:24px}
#lab-app .lab2-demo[data-theme=editorial] .lab2-demo-nav,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-demo-nav{border-bottom:1px solid color-mix(in srgb,var(--demo-ink) 25%,transparent);padding-bottom:19px}
#lab-app .lab2-demo[data-theme=editorial] .lab2-demo-nav strong,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-demo-nav strong{font-family:Georgia,serif;font-style:italic;font-weight:400}
#lab-app .lab2-demo[data-theme=editorial] .lab2-demo-hero,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-demo-hero{grid-template-columns:1fr 1fr;gap:24px;padding-block:32px;min-height:350px}
#lab-app .lab2-demo[data-theme=editorial] h3,dialog.lab-modal .lab2-demo[data-theme=editorial] h3{font-family:Georgia,serif;font-weight:400;font-size:clamp(34px,6.5cqi,78px);line-height:1.03;letter-spacing:-.055em}
#lab-app .lab2-demo[data-theme=editorial] h3 em,dialog.lab-modal .lab2-demo[data-theme=editorial] h3 em{font-style:italic}
#lab-app .lab2-demo[data-theme=editorial] .lab2-demo-cta,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-demo-cta{border-radius:0}
#lab-app .lab2-demo[data-theme=editorial] .lab2-art-object,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-art-object{width:205px;height:250px;border-radius:110px 110px 0 0;transform:rotate(-5deg);box-shadow:14px 12px 0 color-mix(in srgb,var(--demo-ink) 14%,transparent);background:radial-gradient(ellipse at 23% 25%,color-mix(in srgb,var(--demo-accent) 45%,var(--demo-bg)),transparent 70%),var(--demo-accent)}
#lab-app .lab2-demo[data-theme=editorial] .lab2-art-orbit,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-art-orbit{width:240px;height:240px;transform:rotate(-24deg);opacity:.3}
#lab-app .lab2-demo[data-theme=editorial] .lab2-art-orbit-alt,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-art-orbit-alt{border-radius:0;transform:rotate(17deg);width:160px;height:220px;opacity:.23}
#lab-app .lab2-demo[data-theme=editorial] .lab2-art-mark,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-art-mark{color:var(--demo-bg);mix-blend-mode:normal;font-style:italic;font-size:150px;opacity:.85}
#lab-app .lab2-demo[data-theme=editorial] .lab2-demo-details,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-demo-details{gap:20px}
#lab-app .lab2-demo[data-theme=editorial] .lab2-demo-details strong,dialog.lab-modal .lab2-demo[data-theme=editorial] .lab2-demo-details strong{font:400 17px Georgia,serif;line-height:1.2}

#lab-app .lab2-demo[data-theme=essencial] .lab2-demo-hero,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-demo-hero{grid-template-columns:1.4fr .8fr;gap:10px;min-height:350px}
#lab-app .lab2-demo[data-theme=essencial] h3,dialog.lab-modal .lab2-demo[data-theme=essencial] h3{font-weight:700;font-size:clamp(35px,7.6cqi,92px);letter-spacing:-.07em}
#lab-app .lab2-demo[data-theme=essencial] .lab2-demo-cta,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-demo-cta{border-radius:3px}
#lab-app .lab2-demo[data-theme=essencial] .lab2-art-object,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-art-object{border-radius:15px;width:165px;height:195px;background:var(--demo-ink);box-shadow:13px 13px 0 color-mix(in srgb,var(--demo-ink) 18%,transparent);transform:rotate(10deg)}
#lab-app .lab2-demo[data-theme=essencial] .lab2-art-orbit,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-art-orbit{border-radius:17px;width:230px;height:230px;transform:rotate(-12deg);opacity:.25}
#lab-app .lab2-demo[data-theme=essencial] .lab2-art-orbit-alt,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-art-orbit-alt{display:none}
#lab-app .lab2-demo[data-theme=essencial] .lab2-art-mark,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-art-mark{font:600 120px var(--display,Arial,sans-serif);color:var(--demo-bg);transform:rotate(10deg);mix-blend-mode:normal;opacity:1}
#lab-app .lab2-demo[data-theme=essencial] .lab2-demo-details>div,dialog.lab-modal .lab2-demo[data-theme=essencial] .lab2-demo-details>div{border-left:2px solid var(--demo-ink);padding-left:12px}

/* Segment-specific content has a distinct visual rhythm. */
#lab-app .lab2-demo[data-segment=food] .lab2-detail-art,dialog.lab-modal .lab2-demo[data-segment=food] .lab2-detail-art{display:block;height:46px;width:64px;border-radius:50%;background:radial-gradient(ellipse at 35% 30%,var(--demo-bg),transparent 60%),var(--demo-accent);opacity:.8;transform:rotate(-14deg);margin:1px 0 13px}
#lab-app .lab2-demo[data-segment=food] .lab2-detail-art-2,dialog.lab-modal .lab2-demo[data-segment=food] .lab2-detail-art-2{width:42px;border-radius:5px 5px 20px 20px;transform:rotate(4deg)}
#lab-app .lab2-demo[data-segment=food] .lab2-detail-art-3,dialog.lab-modal .lab2-demo[data-segment=food] .lab2-detail-art-3{width:59px;height:42px;border-radius:8px;transform:rotate(-4deg)}
#lab-app .lab2-demo[data-segment=portfolio] .lab2-detail-art,dialog.lab-modal .lab2-demo[data-segment=portfolio] .lab2-detail-art{display:block;height:80px;margin-bottom:13px;background:linear-gradient(135deg,var(--demo-accent) 50%,color-mix(in srgb,var(--demo-accent) 30%,var(--demo-bg)) 50%);border-radius:2px}
#lab-app .lab2-demo[data-segment=portfolio] .lab2-detail-art-2,dialog.lab-modal .lab2-demo[data-segment=portfolio] .lab2-detail-art-2{background:radial-gradient(circle at 50% 50%,var(--demo-bg) 20%,transparent 21%),var(--demo-accent)}
#lab-app .lab2-demo[data-segment=portfolio] .lab2-detail-art-3,dialog.lab-modal .lab2-demo[data-segment=portfolio] .lab2-detail-art-3{background:repeating-linear-gradient(-45deg,var(--demo-bg) 0 9px,var(--demo-accent) 10px 13px)}

/* Native modal supplies inert background and escape support; explicit controls restore focus. */
dialog.lab-modal{--lab-muted:#a5b2c9;width:min(1180px,calc(100vw - 48px));max-height:calc(100dvh - 48px);height:auto;padding:0;background:#0e1525;color:#eff5ff;border:1px solid #6f87aa70;border-radius:13px;margin:auto;overflow:auto;box-shadow:0 35px 130px #0008;overscroll-behavior:contain}
dialog.lab-modal::backdrop{background:#030815dd;backdrop-filter:blur(7px)}
dialog.lab-modal:not([open]){display:none}
dialog.lab-modal .lab2-modal-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 28px;border-bottom:1px solid #bbcce925}
dialog.lab-modal .lab2-modal-header h2{font:500 25px/1.2 var(--display,Arial,sans-serif);letter-spacing:-.03em;margin-top:7px}
dialog.lab-modal .lab2-modal-close{background:#ffffff08;color:#e6efff;min-height:44px;display:flex;align-items:center;gap:20px;font-size:12px;padding:10px 13px;border-radius:5px;cursor:pointer;white-space:nowrap}
dialog.lab-modal .lab2-modal-close>span{font-size:22px}
dialog.lab-modal .lab2-modal-preview{padding:25px 28px}
dialog.lab-modal .lab2-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:0 28px 26px}
dialog.lab-modal .lab2-modal-footer>p{font-size:11px;color:#a4b5cd;line-height:1.8;max-width:430px}
dialog.lab-modal .lab2-choose{white-space:nowrap}

@container lab-preview (max-width:520px){
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo{padding:23px 25px 18px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-nav,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-nav{gap:15px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-nav>strong,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-nav>strong{font-size:21px;max-width:65%}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-nav>span,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-nav>span{gap:10px;font-size:7px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-nav>span>span:first-child,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-nav>span>span:first-child{display:none}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-hero,#lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-demo-hero,#lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] .lab2-demo-hero,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-hero,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-demo-hero,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] .lab2-demo-hero{display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:0;padding:33px 0 20px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo h3,#lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] h3,#lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] h3,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo h3,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] h3,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] h3{font-size:clamp(38px,12.7cqi,65px);margin-block:16px 18px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-description,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-description{font-size:11px;max-width:340px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-kicker,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-kicker{font-size:6.5px;letter-spacing:.12em}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-art,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-art{height:255px;margin-top:13px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-art-object,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-art-object{width:155px;height:155px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-art-orbit,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-art-orbit{width:220px;height:220px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-art-orbit-alt,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-art-orbit-alt{width:245px;height:245px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-art-object,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-art-object{height:205px;width:170px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-art-orbit,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-art-orbit{width:215px;height:215px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-art-orbit-alt,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-art-orbit-alt{width:150px;height:190px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] .lab2-art-object,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] .lab2-art-object{width:150px;height:170px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-art-caption,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-art-caption{font-size:5px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-details,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-details{gap:13px;padding-block:20px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-details strong,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-details strong{font-size:9px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-details>div>span:last-child,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-details>div>span:last-child{font-size:8px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-demo-details strong,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=editorial] .lab2-demo-details strong{font-size:15px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo-footer,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo-footer{font-size:5px;letter-spacing:.04em}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-segment=portfolio] .lab2-detail-art,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-segment=portfolio] .lab2-detail-art{height:54px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-segment=food] .lab2-detail-art,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-segment=food] .lab2-detail-art{max-width:100%;height:35px}
 #lab-app .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] .lab2-demo-details>div,dialog.lab-modal .lab2-frame[data-device=mobile] .lab2-demo[data-theme=essencial] .lab2-demo-details>div{padding-left:8px}
}

/* A narrow desktop preview keeps its desktop composition; the phone is a separate layout. */
@container lab-preview (max-width:520px){
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo{padding:4cqi 4.5cqi 3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-nav>strong,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-nav>strong{font-size:4cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-nav>span,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-nav>span{font-size:1.5cqi;gap:3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-nav i,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-nav i{font-size:4cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-hero,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-hero{min-height:64cqi;padding:6cqi 0;gap:2cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-demo-hero,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-demo-hero{gap:4cqi;min-height:64cqi;padding:6cqi 0}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-demo-hero,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-demo-hero{min-height:64cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo h3,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo h3{font-size:7.4cqi;margin:3cqi 0}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] h3,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] h3{font-size:6.7cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] h3,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] h3{font-size:7.6cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-description,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-description{font-size:2cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-kicker,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-kicker{font-size:1.3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-cta,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-cta{font-size:1.7cqi;padding:2cqi 2.5cqi;gap:3cqi;min-height:7cqi;margin-top:4cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-cta>span,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-cta>span{font-size:3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-art,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-art{height:52cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-art-object,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-art-object{width:32cqi;height:32cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-art-orbit,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-art-orbit{width:45cqi;height:45cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-art-orbit-alt,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-art-orbit-alt{width:50cqi;height:50cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-art-mark,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-art-mark{font-size:26cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-object,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-object{width:32cqi;height:43cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-orbit,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-orbit{width:42cqi;height:42cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-orbit-alt,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-orbit-alt{width:29cqi;height:39cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-mark,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-art-mark{font-size:27cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-art-object,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-art-object{width:29cqi;height:35cqi;border-radius:3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-art-orbit,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-art-orbit{width:41cqi;height:41cqi;border-radius:3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-art-mark,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=essencial] .lab2-art-mark{font-size:23cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-art-caption,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-art-caption{font-size:1.15cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-details,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-details{padding:4cqi 0;gap:3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-details strong,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-details strong{font-size:2.1cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-demo-details strong,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-theme=editorial] .lab2-demo-details strong{font-size:3cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-details>div>span:last-child,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-details>div>span:last-child{font-size:1.65cqi;margin-top:1cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo-footer,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo-footer{font-size:1.1cqi;padding-top:2.6cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-segment=food] .lab2-detail-art,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-segment=food] .lab2-detail-art{height:8cqi;width:12cqi;margin-bottom:2cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-segment=food] .lab2-detail-art-2,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-segment=food] .lab2-detail-art-2{width:8cqi}
 #lab-app .lab2-frame[data-device=desktop] .lab2-demo[data-segment=portfolio] .lab2-detail-art,dialog.lab-modal .lab2-frame[data-device=desktop] .lab2-demo[data-segment=portfolio] .lab2-detail-art{height:14cqi;margin-bottom:2cqi}
}

@media(max-width:1000px){
 #lab-app .lab2-context{grid-template-columns:.85fr 1.15fr;column-gap:30px;row-gap:22px}
 #lab-app .lab2-palette-field{grid-column:1/-1}
 #lab-app .lab2-palettes{gap:25px}
 #lab-app .lab2-theme-note{font-size:10px;margin-left:0}
 #lab-app .lab2-footer{align-items:start;flex-direction:column}
 #lab-app .lab2-footer-actions{width:100%;justify-content:space-between}
}
@media(min-width:761px){#lab-app .lab2-compare-tabs{display:none!important}}
@media(max-width:760px){
 #lab-app .lab2-themes{gap:18px}
 #lab-app .lab2-theme-name{font-size:25px;gap:9px}
 #lab-app .lab2-theme-name>span{font-size:18px}
 #lab-app .lab2-theme-option{padding-bottom:17px}
 #lab-app .lab2-preview-toolbar{align-items:start;flex-direction:column;gap:15px}
 #lab-app .lab2-preview-actions{width:100%;justify-content:space-between;gap:12px}
 #lab-app .lab2-deck[data-compare=true] .lab2-preview-grid{grid-template-columns:minmax(0,1fr)}
 #lab-app .lab2-compare-tabs{display:flex;gap:8px;margin-bottom:17px;border-bottom:1px solid var(--lab-line)}
 #lab-app .lab2-compare-tabs button{background:transparent;color:#92a2bd;font-size:12px;border-bottom:2px solid transparent;padding:12px 15px;min-height:44px}
 #lab-app .lab2-compare-tabs button[aria-selected=true]{color:var(--lab-accent);border-color:var(--lab-accent)}
 #lab-app .lab2-comparison-settings{align-items:start;flex-direction:column;gap:8px}
 #lab-app .lab2-caption-index{display:none}
 #lab-app .lab2-caption{padding-top:17px}
 dialog.lab-modal{width:calc(100vw - 26px);max-height:calc(100dvh - 26px);border-radius:9px}
 dialog.lab-modal .lab2-modal-header{padding:17px 18px;gap:12px}
 dialog.lab-modal .lab2-modal-header h2{font-size:21px}
 dialog.lab-modal .lab2-modal-header .lab2-label{font-size:7px;letter-spacing:.07em}
 dialog.lab-modal .lab2-modal-preview{padding:17px}
 dialog.lab-modal .lab2-modal-footer{padding:0 18px 20px;flex-direction:column;align-items:stretch;gap:16px}
 dialog.lab-modal .lab2-modal-footer>p{max-width:none;font-size:10px}
}
@media(max-width:540px){
 #lab-app .lab2-label{font-size:8px;letter-spacing:.08em}
 #lab-app .lab2-themes{gap:12px}
 #lab-app .lab2-theme-name{display:block;font-size:23px;letter-spacing:-.045em}
 #lab-app .lab2-theme-name small{display:block;margin-bottom:9px;font-size:8px}
 #lab-app .lab2-theme-name>span{display:none}
 #lab-app .lab2-theme-note{font-size:9px;line-height:1.65;min-height:30px}
 #lab-app .lab2-theme-option{padding-top:4px;padding-bottom:17px}
 #lab-app .lab2-context{grid-template-columns:1fr;gap:23px;padding:26px 0}
 #lab-app .lab2-field>select,#lab-app .lab2-field>input{font-size:16px}
 #lab-app .lab2-field-note{font-size:10px}
 #lab-app .lab2-palettes{gap:23px}
 #lab-app .lab2-palette{font-size:10px;min-height:44px}
 #lab-app .lab2-preview-actions{align-items:center;gap:12px}
 #lab-app .lab2-device-group button{font-size:9px;padding:8px;min-height:38px;gap:5px}
 #lab-app .lab2-compare-toggle{font-size:10px;gap:7px}
 #lab-app .lab2-compare-toggle>span{font-size:17px}
 #lab-app .lab2-browser-bar{padding:8px 11px;gap:9px;font-size:8px}
 #lab-app .lab2-browser-bar>button{gap:5px;font-size:8px}
 #lab-app .lab2-caption>p{font-size:10px;line-height:1.85}
 #lab-app .lab2-footer{gap:18px;margin-top:25px;padding-top:20px}
 #lab-app .lab2-selection>p{font-size:12px}
 #lab-app .lab2-footer-actions{flex-wrap:wrap;gap:12px}
 #lab-app .lab2-choose{font-size:11px;gap:18px;padding-inline:17px}
 #lab-app .lab2-share{font-size:10px;gap:10px}
 #lab-app .lab2-share-fallback{padding:16px}
 #lab-app .lab2-frame[data-device=mobile]{border-width:4px}
 dialog.lab-modal .lab2-modal-close{gap:10px;padding:8px;font-size:10px}
}
@media(max-width:360px){
 #lab-app .lab2-themes{gap:9px}
 #lab-app .lab2-theme-name{font-size:21px}
 #lab-app .lab2-theme-note{font-size:8px}
 #lab-app .lab2-palettes{gap:17px}
 #lab-app .lab2-preview-actions{gap:8px}
 #lab-app .lab2-device-group button{padding-inline:7px}
 #lab-app .lab2-compare-toggle{font-size:9px}
 #lab-app .lab2-browser-dots{display:none}
 #lab-app .lab2-footer-actions{align-items:stretch;flex-direction:column-reverse;gap:4px}
 #lab-app .lab2-share{justify-content:center}
 dialog.lab-modal .lab2-modal-header{padding:15px 13px}
 dialog.lab-modal .lab2-modal-header h2{font-size:18px}
 dialog.lab-modal .lab2-modal-preview{padding:12px}
}
@media(prefers-reduced-motion:reduce){#lab-app *,#lab-app *::before,#lab-app *::after,dialog.lab-modal *,dialog.lab-modal *::before,dialog.lab-modal *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html.reduce-motion #lab-app *,html.reduce-motion dialog.lab-modal *{animation:none!important;transition:none!important;scroll-behavior:auto!important}