.ux-design-notes {
  max-width: 1440px;
  margin: 60px auto;
  padding: 30px 5%;
  border-block: 1px solid #d3dbd6;
  font-family: Arial, sans-serif;
}
.ux-design-notes > div {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
}
.ux-design-notes b {
  font-size: 19px;
}
.ux-design-notes a {
  font-size: 13px;
  text-decoration: underline;
}
.ux-design-notes nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}
/* Learning paths and focused labs share the storefront's restrained palette. */
.ux-paths,.ux-lab-directory {margin:64px 0;padding-top:36px;border-top:1px solid #ccd8d1}
.ux-paths>div {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:28px}
.ux-paths article>span {color:#437d74;font-size:13px}
.ux-paths h3 {font-size:23px;line-height:1.2;margin:14px 0}
.ux-paths p,.ux-lab-directory p {font-size:15px;line-height:1.6;color:#506159}
.ux-paths nav {display:grid;gap:12px;margin-top:26px}
.ux-paths nav a {font-size:13px;text-decoration:underline;text-underline-offset:3px}
.ux-lab-directory>div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.ux-lab-directory>div>a {padding:25px;background:#edf3ee;border-top:2px solid #417d74}
.ux-lab-directory h3 {font-size:20px;margin:0}
.ux-decision-grid {display:grid;grid-template-columns:1fr 1fr;gap:35px;border-block:1px solid #d0dcd4;padding:26px 0;margin:40px 0}
.ux-decision-grid p {font-size:18px;line-height:1.6;margin:15px 0 0}
.ux-lab h1,.ux-test-plan h1 {max-width:1000px;font-size:clamp(36px,5vw,68px);line-height:1.07;letter-spacing:-.045em}
.ux-lab-disclosure {background:#edf3ee;padding:16px;font-size:14px;line-height:1.6}
.ux-discovery-layout {display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:45px;margin-top:40px}
.ux-discovery-search>label {display:block;font-weight:bold;margin-bottom:12px}
.ux-search-box {position:relative;display:flex;gap:10px}
.ux-search-box input {min-width:0;flex:1;padding:15px;border:1px solid #859a8e;background:#fff;font:inherit;border-radius:2px}
.ux-search-box ul {position:absolute;top:100%;left:0;right:0;z-index:8;background:white;border:1px solid #859a8e;list-style:none;padding:0;margin:4px 0;box-shadow:0 8px 24px #15251c18}
.ux-search-box li {padding:15px;cursor:pointer}
.ux-search-box li[aria-selected=true],.ux-search-box li:hover {background:#e5f0e9}
.ux-lab-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}
.ux-lab-cards article {border:1px solid #d0dcd4;padding:24px;min-width:0}
.ux-lab-cards h2,.ux-lab-cards h3 {font-size:21px;letter-spacing:-.03em;margin:18px 0 12px}
.ux-lab-cards strong {font-size:20px}
.ux-lab-cards p,.ux-lab-cards small {font-size:13px;line-height:1.65;color:#506159;overflow-wrap:anywhere}
.ux-search-art,.ux-pack-art,.ux-machine-art {display:grid;place-content:center;background:#e7eee4;height:105px;font-size:48px;font-weight:600;letter-spacing:-.06em;color:#3b6555}
.ux-machine-art {background:#dce7ea;color:#285460}
.ux-machine-art small {text-align:center;font-size:14px;color:inherit}
[data-discovery-count] {margin:18px 0;font-size:14px;color:#506159}
[data-discovery-help] article {padding:20px;background:#edf3ee;margin:20px 0}
[data-discovery-help] a {font-size:21px;font-weight:600;text-decoration:underline}
[data-discovery-help] p {font-size:15px;line-height:1.6}
.ux-lab-taskbox {border-left:1px solid #d0dcd4;padding-left:24px}
.ux-lab-taskbox h2 {font-size:22px}
.ux-lab-taskbox button {display:block;width:100%;text-align:left;padding:13px 0;border:0;border-bottom:1px solid #d0dcd4;background:none;font:inherit;cursor:pointer}
.ux-lab-taskbox button small {display:block;margin-top:5px;font-size:12px;color:#506159}
.ux-lab-taskbox p {font-size:14px;line-height:1.7}
.ux-lab-taskbox>a {display:block;font-size:14px;text-decoration:underline;margin:15px 0}
[data-discovery-empty] {padding:28px 0;border-top:1px solid #ccd8d1}
[data-discovery-empty] h2 {font-size:24px}
[data-discovery-clear],.ux-compare-tray button,.ux-plan-toolbar button {padding:12px 16px;background:white;border:1px solid #859a8e;font:inherit;cursor:pointer}
.ux-comparison-section {border-top:1px solid #ccd8d1;padding-top:36px;margin:40px 0}
.ux-comparison-section h2 {font-size:clamp(25px,3vw,36px);max-width:850px}
.ux-sort-label {display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:14px}
.ux-sort-label select,.ux-plan-toolbar select {padding:12px;background:white;border:1px solid #859a8e;font:inherit}
.ux-compare-check {display:flex;gap:8px;align-items:center;font-size:14px;min-height:44px;margin-top:20px;cursor:pointer}
.ux-compare-check input,.ux-comparison-result input {width:20px;height:20px;accent-color:#35736a}
.ux-compare-tray {display:flex;flex-wrap:wrap;gap:14px;align-items:center;background:#edf3ee;border-block:1px solid #c4d8ca;padding:14px}
.ux-compare-tray p {font-size:14px;margin:0}
.ux-compare-tray>div {display:flex;gap:8px;flex-wrap:wrap;flex:1}
.ux-compare-tray button {font-size:13px}
.ux-compare-tray button:disabled {opacity:.5;cursor:default}
.ux-comparison-result {margin-top:30px}
.ux-table-scroll {overflow-x:auto;margin:20px 0;max-width:100%}
.ux-table-scroll table {border-collapse:collapse;min-width:600px;width:100%;font-size:15px}
.ux-table-scroll caption {text-align:left;font-size:13px;color:#506159;margin:12px 0}
.ux-table-scroll th,.ux-table-scroll td {text-align:left;padding:18px 12px;border-block:1px solid #ccd8d1}
.ux-table-scroll thead {background:#edf3ee}
.ux-product-nav {display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;font-size:13px;margin:16px 0 25px}
.ux-product-nav a {text-decoration:underline;text-underline-offset:3px}
.ux-product-nav .ux-return-list {margin-left:auto}
.product-card[id] {scroll-margin-top:100px}
.ux-guide-open {display:block;margin:0 0 12px auto;border:0;background:none;font:inherit;font-size:13px;text-decoration:underline;cursor:pointer;min-height:36px}
.ux-size-guide {padding:25px;width:min(620px,calc(100% - 28px));max-height:85vh;border:1px solid #859a8e;overflow:auto}
.ux-size-guide::backdrop {background:#15251c70}
.ux-guide-header {display:flex;justify-content:space-between;gap:16px;align-items:center}
.ux-guide-header h2 {font-size:23px;margin:0}
.ux-guide-header button,.ux-guide-units button {font:inherit;padding:12px;background:#fff;border:1px solid #859a8e;cursor:pointer}
.ux-size-guide p {font-size:14px;line-height:1.65}
.ux-size-guide table {border-collapse:collapse;width:100%;font-size:14px;margin:20px 0}
.ux-size-guide caption {text-align:left;font-size:13px;margin-bottom:12px}
.ux-size-guide th,.ux-size-guide td {text-align:left;border-bottom:1px solid #ccd8d1;padding:14px 8px}
.ux-size-guide tr.selected {background:#edf3ee}
.ux-guide-units {display:flex;gap:10px}
.ux-guide-units [aria-pressed=true] {background:#295e56;color:white}
.ux-size-guide a {font-size:14px;text-decoration:underline}
.ux-product-sections {margin-top:26px}
.ux-product-sections details {border-top:1px solid #d0dcd4;padding-top:15px}
.ux-product-sections summary {font-weight:600}
.ux-date-note {font-size:12px!important;color:#506159}
.ux-address-extra {grid-column:1/-1;padding:12px 0}
.ux-address-extra summary {font-size:14px;text-decoration:underline;cursor:pointer}
.ux-address-extra input {margin-top:12px}
.ux-test-plan>section {border-top:1px solid #ccd8d1;padding:28px 0;margin-top:24px;scroll-margin-top:100px}
.ux-test-plan header {display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.ux-test-plan h2 {font-size:24px}
.ux-test-plan header span {font-size:13px;color:#506159}
.ux-plan-toolbar {display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:18px 0;margin:24px 0;border-block:1px solid #ccd8d1;font-size:14px}
.ux-plan-toolbar label {display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ux-test-case {display:flex;gap:16px;padding:15px 0;cursor:pointer;font-size:16px;line-height:1.6}
.ux-test-case input {width:20px;height:20px;flex:none;margin-top:3px;accent-color:#35736a}
.ux-test-case:has(input:checked) span {color:#506159}
.ux-test-plan .eyebrow {display:block;margin-top:30px}
@media(max-width:1000px) {.ux-paths>div{grid-template-columns:1fr 1fr}.ux-discovery-layout{grid-template-columns:minmax(0,1fr) 230px;gap:25px}.ux-lab-cards{gap:12px}.ux-lab-cards article{padding:16px}}
@media(max-width:700px) {.ux-paths,.ux-lab-directory{margin:40px 0}.ux-paths>div,.ux-lab-directory>div,.ux-decision-grid,.ux-discovery-layout{grid-template-columns:1fr}.ux-lab-cards{grid-template-columns:1fr}.ux-lab-cards article{display:grid;grid-template-columns:90px minmax(0,1fr);gap:0 18px;padding:18px}.ux-lab-cards article>span{grid-row:span 5;height:110px}.ux-lab-cards h2,.ux-lab-cards h3{margin:0 0 10px}.ux-lab-cards p{margin:6px 0}.ux-compare-check{grid-column:1/-1;margin-top:14px}.ux-lab-taskbox{border-left:0;border-top:1px solid #d0dcd4;padding:24px 0}.ux-search-box input{width:0}.ux-search-box .button{padding:14px 20px}.ux-paths nav{gap:15px}.ux-product-nav .ux-return-list{margin-left:0;flex-basis:100%}.ux-test-plan header{display:block}.ux-plan-toolbar{position:static}.ux-test-case{font-size:15px}.ux-table-scroll{max-width:calc(100vw - 40px)}.ux-guide-header button{font-size:13px}.ux-compare-tray>div{flex:none;width:100%}.ux-compare-tray button{white-space:nowrap}}
@media print {body:has([data-ux-test-plan]) .header,body:has([data-ux-test-plan]) .notice,body:has([data-ux-test-plan]) .footer,.ux-plan-toolbar{display:none!important}.ux-test-case{break-inside:avoid}.ux-test-plan{padding:0}.ux-test-plan h1{font-size:32px}.ux-test-plan .ux-example-links{font-size:12px}}
/* Task-based grouping: the same hierarchy in navigation, titles and learning. */
.ux-group-directory {margin:50px 0;border-top:1px solid #ccd8d1;padding-top:32px;scroll-margin-top:100px}
.ux-group-directory>div {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px}
.ux-group-directory>div>a {display:block;border-top:2px solid #35736a;padding:22px 0;text-decoration:none}
.ux-group-directory span {font-size:12px;color:#506159}
.ux-group-directory h3 {font-size:25px;line-height:1.25;letter-spacing:-.03em;margin:16px 0}
.ux-group-directory p {font-size:15px;line-height:1.65;color:#506159}
.ux-measure,.ux-related,.ux-lab-related {border-top:1px solid #ccd8d1;margin-top:44px;padding:28px 0}
.ux-measure p,.ux-related p,.ux-lab-related p {max-width:950px;font-size:16px;line-height:1.7}
.ux-related nav,.ux-lab-related nav,.ux-platform-links {display:flex;flex-wrap:wrap;gap:14px 24px}
.ux-related a,.ux-lab-related a,.ux-platform-links a {font-size:14px;text-decoration:underline;text-underline-offset:3px}
.ux-platform-links {margin:22px 0}
.ux-breadcrumb {flex-wrap:wrap}
.ux-lab-directory>div {grid-template-columns:repeat(4,minmax(0,1fr))}
.ux-needs {border:1px solid #ccd8d1;margin:30px 0;padding:24px;display:flex;flex-wrap:wrap;gap:20px}
.ux-needs legend {font-weight:600;padding:0 8px}
.ux-needs p {width:100%;font-size:14px;margin:0;color:#506159}
.ux-needs label {display:flex;align-items:center;gap:10px;min-height:44px}
.ux-needs input {width:20px;height:20px;accent-color:#35736a}
.ux-decision-cards {grid-template-columns:1fr 1fr}
.ux-decision-cards button,.ux-accessory button,.ux-lab-basket button,.ux-worksheet-grid+button,[data-cro-worksheet] form button {min-height:44px;padding:12px 18px;background:white;border:1px solid #859a8e;font:inherit;cursor:pointer}
.ux-decision-cards [aria-pressed=true] {background:#295e56;color:white}
.ux-product-choice {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;margin-top:40px}
.ux-product-choice h2 {font-size:32px}
.ux-product-choice h3 {font-size:21px}
.ux-product-choice p {font-size:15px;line-height:1.7}
.ux-facts {display:grid;grid-template-columns:120px 1fr;font-size:15px;line-height:1.7;gap:12px;margin:26px 0}
.ux-facts dt {font-weight:600}.ux-facts dd {margin:0}
.ux-policy,.ux-accessory {border-block:1px solid #ccd8d1;padding:18px 0;margin:24px 0}
.ux-policy summary,.ux-lab-basket summary {min-height:44px;padding:12px 0;cursor:pointer;text-decoration:underline}
.ux-lab-basket {border:1px solid #ccd8d1;background:#f4f7f3;padding:24px;align-self:start}
.ux-lab-basket h2 {margin-top:0}.ux-lab-basket dl {display:grid;grid-template-columns:1fr auto;gap:12px}.ux-lab-basket dd {margin:0}
.ux-lab-basket [data-decision-lines]>div {border-bottom:1px solid #ccd8d1;padding:14px 0}
.ux-lab-basket [data-decision-lines] button {padding:6px;font-size:13px}
.ux-lab-basket label {display:block;font-size:14px;margin:12px 0}
.ux-lab-basket input {width:100%;padding:12px;background:white;border:1px solid #859a8e;font:inherit}
.ux-lab-basket [aria-invalid=true] {border-color:#a12626}
[data-cro-worksheet] form {margin:30px 0;padding:24px 0;border-block:1px solid #ccd8d1;display:flex;align-items:center;flex-wrap:wrap;gap:14px}
[data-cro-worksheet] form select {min-width:0;max-width:100%;padding:14px;background:#fff;border:1px solid #859a8e;font:inherit}
[data-cro-worksheet] form p {width:100%;font-size:13px;margin:0}
.ux-worksheet-grid {display:grid;grid-template-columns:1fr 1fr;gap:36px}
.ux-worksheet-grid label {display:block;font-weight:600;margin:25px 0 10px}
.ux-worksheet-grid textarea {width:100%;padding:16px;border:1px solid #859a8e;font:inherit;font-size:15px;line-height:1.65;resize:vertical}
.ux-worksheet-grid aside {background:#f4f7f3;padding:24px;align-self:start;overflow-wrap:anywhere}
.ux-worksheet-grid aside h2 {font-size:26px;margin-top:0}
.ux-worksheet-preview section {border-top:1px solid #ccd8d1;padding-top:14px;margin-top:22px}
.ux-worksheet-grid h3 {font-size:16px}
.ux-worksheet-grid p {font-size:14px;line-height:1.7;white-space:pre-wrap}
@media(max-width:1000px) {.ux-group-directory>div,.ux-lab-directory>div{grid-template-columns:1fr 1fr}.ux-product-choice{grid-template-columns:minmax(0,1fr) 290px;gap:24px}}
@media(max-width:700px) {.ux-group-directory>div,.ux-lab-directory>div,.ux-product-choice,.ux-worksheet-grid{grid-template-columns:1fr}.ux-group-directory{margin:35px 0}.ux-group-directory>div{gap:8px}.ux-product-choice{gap:20px}.ux-decision-cards{grid-template-columns:1fr}.ux-decision-cards button{grid-column:1/-1}.ux-facts{grid-template-columns:95px 1fr}.ux-lab-basket{padding:20px}.ux-worksheet-grid aside{padding:20px}.ux-group-directory h3{font-size:23px}}
.ux-further {display:inline-block;margin:0 18px 12px 0;font-size:13px;text-decoration:underline}
.designs-section .section-heading h1 {font-size:clamp(32px,4vw,50px);line-height:1.1;letter-spacing:-.04em;max-width:900px;margin:0 0 20px}
[data-decision-title] {scroll-margin-top:110px}
.ux-group-directory>div>a {position:relative}
.ux-group-directory .ux-group-arrow {position:absolute;right:0;top:20px;font-size:22px;color:#35736a}
/* The larger library is a separate, server-rendered task finder. */
.ux-library h1 { font-size:clamp(2.5rem,5vw,4.5rem); letter-spacing:-.055em; line-height:1.08; max-width:24ch; }
.ux-library .lead { max-width:66ch; }
.ux-library-form { display:grid;grid-template-columns:2fr 2fr 1fr 1.3fr;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--line,#d7ddda);border-bottom:1px solid var(--line,#d7ddda);margin-top:2.5rem;align-items:end; }
.ux-library-form label { display:grid;gap:.5rem;font-size:.88rem;font-weight:600; }
.ux-library-form input,.ux-library-form select { width:100%;min-width:0;min-height:48px;padding:.65rem;border:1px solid #abbdb7;background:white;color:#152b27;font:inherit; }
.ux-library-form .button { justify-self:start; }
.ux-library-form > a { padding:.8rem 0; }
.ux-library-result-heading { display:flex;align-items:baseline;gap:2rem;justify-content:space-between;margin:2rem 0; }
.ux-library-result-heading p { max-width:65ch;font-size:.9rem;color:#53615b; }
.ux-library-group { margin:3rem 0; }
.ux-library-group header { display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid #acbdb6;padding-bottom:.7rem; }
.ux-library-group header h2 { font-size:1.4rem;margin:0; }
.ux-library-group > div { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem; }
.ux-library-group article { padding:1.5rem 0;border-bottom:1px solid #d9e1dc; }
.ux-library-group h3 { font-size:1.12rem;line-height:1.4;margin:.7rem 0; }
.ux-library-group p { font-size:.95rem;line-height:1.6; }
.ux-library-empty { padding:3rem 0; }
@media(max-width:850px) { .ux-library-form { grid-template-columns:repeat(2,minmax(0,1fr)); }.ux-library-query{grid-column:1/-1}.ux-library-group>div{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:540px) { .ux-library-form,.ux-library-group>div{grid-template-columns:1fr}.ux-library-result-heading{display:block}.ux-library-form{gap:1.2rem}.ux-library-group article{padding:1.4rem 0} }
@media(prefers-reduced-motion:reduce) { html {scroll-behavior:auto!important} *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} }

.ux-search-scope { display:flex; flex-wrap:wrap; gap:12px; padding:14px 0; border:0; }
.ux-search-scope label { display:flex; align-items:center; gap:6px; min-height:44px; }
.ux-search-scope input { width:auto; }
.ux-review-totals { display:grid; grid-template-columns:1fr auto; border-block:1px solid #dedede; padding:16px 0; gap:10px; }
.ux-review-totals dd { margin:0; text-align:right; font-weight:650; }
.ux-delivery-estimate { border-block:1px solid #acbdb6; padding:1.25rem 0; margin:1.5rem 0; scroll-margin-top:2rem; }
.ux-delivery-estimate label { display:block; margin-top:1rem; font-weight:600; }
.ux-delivery-estimate select { width:100%; max-width:100%; min-height:48px; margin-top:.4rem; padding:.6rem; font:inherit; color:inherit; background:#fff; border:1px solid #acbdb6; }
.ux-delivery-preview { font-weight:650; }
.ux-worked-example { border-top:1px solid #acbdb6; padding-top:2rem; margin-top:2rem; scroll-margin-top:2rem; }
.ux-worked-example > p { max-width:75ch; line-height:1.7; }
.ux-worked-example ol { max-width:75ch; padding-left:1.4rem; }
.ux-worked-example li { padding:.5rem 0; line-height:1.7; }
.ux-lesson-jumps { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin:1.5rem 0; }
.ux-lesson-jumps a { min-height:44px; display:flex; align-items:center; }