/* C / Clarity evolved: purposeful tools, quiet page, complete navigation. */
:root{--ux-ink:#13243c;--ux-navy:#101e36;--ux-blue:#2455df;--ux-soft:#f3f6fc;--ux-border:#dce4f1}
button,a,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}button,select,input,textarea{font:inherit}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #4675f0;outline-offset:4px}button:disabled{cursor:not-allowed}html{scroll-padding-top:24px}body{background:#fcfdff}
.utility-shell{background:#13233b;color:#e0e8f8}.utility-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:42px}.utility-note{display:flex;align-items:center;gap:9px;margin:0;font-size:11px;line-height:1.5;color:#d0dbef}.utility-dot{width:5px;height:5px;border-radius:50%;background:#93b6ff}.utility-divider{color:#667b9d;margin:0 3px}.utility-tagline{color:#b5c4dc}.utility-bar .languages{display:flex;gap:5px;max-width:none;font-size:11px}.utility-bar .languages a{gap:7px;min-height:32px;padding:5px 9px;color:#c8d5eb;text-decoration:none;border-radius:5px;white-space:nowrap}.utility-bar .languages a[aria-current]{color:#fff;background:#ffffff13;text-decoration:none;box-shadow:inset 0 -2px #8db0ff}.language-flag{width:21px;height:15px;flex:none;border-radius:2px;box-shadow:0 0 0 1px #ffffff20}.header-shell{position:relative;z-index:40;background:#fff;border-bottom:1px solid var(--ux-border)}.header-shell .site-header{min-height:89px;display:flex;justify-content:space-between;gap:28px;padding-top:0;padding-bottom:0}.header-shell .brand{font-size:27px;letter-spacing:-1.2px;gap:10px;flex-shrink:0}.header-shell .clarity-mark{width:32px;height:32px;border-radius:10px;box-shadow:0 5px 12px #2455df22}.header-shell .desktop-nav{display:flex;gap:30px;width:auto;order:0;align-items:center;margin-left:auto}.header-shell .desktop-nav>details>summary,.header-shell .nav-method-link{font-size:13px;font-weight:650;min-height:48px;display:flex;align-items:center;gap:8px;color:#33465f;text-decoration:none;list-style:none;cursor:pointer}.header-shell summary::-webkit-details-marker{display:none}.nav-chevron{font-size:15px;color:#6a7e9a;transition:transform .18s}.nav-disclosure[open] .nav-chevron{transform:rotate(180deg)}.header-shell a[aria-current]{color:var(--ux-blue)}.header-shell .header-cta,.header-shell .mobile-cta{display:flex;align-items:center;justify-content:center;gap:17px;background:var(--ux-blue);color:#fff;border-radius:8px;padding:13px 19px;font-size:12px;line-height:1.5;font-weight:750;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px #2455df17}.header-cta svg{width:17px;height:17px}.header-shell .header-cta:hover,.header-shell .mobile-cta:hover{background:#1644c8}.nav-disclosure{position:relative}.nav-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #d6dfef;border-radius:16px;box-shadow:0 20px 60px #10234322;overflow:hidden;z-index:50}.tools-panel{width:650px}.nav-panel-intro{padding:20px 24px;background:#f3f6fd;border-bottom:1px solid var(--ux-border)}.nav-panel-intro .eyebrow{font-size:9px}.nav-panel-intro p{font-size:14px;margin:6px 0 0;color:#30435f;font-weight:650}.nav-tool-groups{display:grid;grid-template-columns:1fr 1fr;padding:14px;gap:12px}.nav-group-label{font:10px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:#677c98;margin:12px 10px}.header-shell .nav-tool{display:grid;grid-template-columns:34px minmax(0,1fr) 12px;gap:10px;padding:13px 9px;align-items:start;color:#203451;text-decoration:none;min-height:80px;border-radius:9px;font-size:12px}.nav-tool:hover,.nav-tool[aria-current]{background:#f0f5ff}.nav-tool-icon{width:32px;height:32px;background:#eaf0fc;color:#2455df;display:grid;place-items:center;border-radius:8px}.nav-tool-icon svg{width:21px;height:21px}.nav-tool strong{font-size:12px;display:block;line-height:1.4;margin:1px 0 4px}.nav-tool small{display:block;font-size:11px;line-height:1.6;color:#607590;font-weight:500}.nav-tool-arrow{color:#8b9bb3}.header-shell .nav-method{display:block;margin:14px 10px 8px;font-size:11px;line-height:1.6;color:#2455df;text-decoration:underline}.guides-panel{width:390px;padding:13px 20px 20px}.header-shell .guides-panel>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;font-size:12px;line-height:1.6;text-decoration:none;border-bottom:1px solid #edf1f7;color:#30445f}.guides-panel>a:hover{color:#2455df}.mobile-menu{display:none}.home-heading{padding-top:48px}.article-heading h1{max-width:980px}.article-heading .lead{line-height:1.85}.site-footer{margin-top:44px}.site-footer .brand{letter-spacing:-1px}
/* Manual inspection: a palette beside the real, unfiltered pattern surface. */
.screen-tool{border:1px solid var(--ux-border);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 18px 50px #19355508;margin:0 0 40px}.inspection-chrome{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 30px;border-bottom:1px solid var(--ux-border)}.inspection-chrome .eyebrow{font-size:10px}.article-body .inspection-chrome h2{font-size:23px;letter-spacing:-.035em;margin:8px 0 0;color:var(--ux-ink)}.inspection-badge{display:flex;align-items:center;gap:8px;font-size:11px;color:#526887;white-space:nowrap}.inspection-badge i{width:6px;height:6px;background:#3e6cec;border-radius:50%}.screen-tool .screen-intro{margin:0;padding:22px 30px;background:#f5f8fe;border-bottom:1px solid var(--ux-border)}.screen-intro .primary{border-radius:9px;min-height:47px;background:#2455df;color:#fff;gap:16px;font-size:13px}.screen-tool .screen-intro p{font-size:12px;line-height:1.7;max-width:550px}.screen-workspace{display:grid;grid-template-columns:255px minmax(0,1fr);padding:22px;gap:22px}.screen-palette{min-width:0}.article-body .palette-heading{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;margin:0 0 14px;color:#2e4364}.palette-heading>span{font:10px 'DM Mono',monospace;color:#2455df;border:1px solid #cddbf8;padding:4px;border-radius:4px}.pattern-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pattern-choice{display:flex;flex-direction:column;align-items:flex-start;gap:7px;min-width:0;background:#f6f8fc;border:1px solid #e0e6f1;border-radius:8px;padding:8px;color:#405675;cursor:pointer;text-align:left;min-height:74px;font-size:10px;line-height:1.45}.pattern-color{display:block;height:25px;width:100%;border-radius:4px;border:1px solid #10234320}.pattern-choice[aria-pressed=true]{border-color:#2455df;box-shadow:0 0 0 1px #2455df;color:#1644c8;background:#edf3ff}.pattern-choice:hover{border-color:#829fdc}.article-body .palette-note{font-size:11px;line-height:1.7;color:#5c708c;margin:14px 0 0}.screen-workspace .screen-stage{height:auto;min-height:500px;border:1px solid #cad5e6;border-radius:12px;background:#808080}.screen-preview-label{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;font:9px 'DM Mono',monospace;letter-spacing:.08em;color:#fff;text-shadow:0 1px 2px #000;pointer-events:none}.screen-stage.is-active .screen-preview-label,.screen-stage.controls-hidden .screen-preview-label{display:none}.screen-workspace .screen-toolbar{left:18px;right:18px;bottom:18px;border-radius:12px;padding:20px;background:#fff;box-shadow:0 12px 30px #10234320}.screen-toolbar-top select{border-radius:7px}.screen-tool .screen-status{margin:0!important;padding:16px 24px;border-top:1px solid var(--ux-border);background:#f8faff;font-size:12px!important;color:#435d80!important}.screen-tool .screen-help{padding:0 24px 18px;margin:12px 0 0!important;font-size:11px!important}.screen-actions button{border-radius:6px;transition:background .15s}.screen-actions button:hover:not(:disabled){background:#edf3ff}.screen-stage:fullscreen{border:0!important;border-radius:0!important;min-height:100dvh}.screen-stage:fullscreen .screen-toolbar{max-width:850px}.screen-stage.is-active:not(:fullscreen){min-height:650px}
@media(max-width:1040px){.header-shell .desktop-nav{gap:20px}.header-shell .site-header{gap:22px}.tools-panel{left:45%;width:600px}.header-shell .header-cta{padding:12px 14px}.header-shell .brand{font-size:24px}.screen-workspace{grid-template-columns:220px minmax(0,1fr);padding:18px;gap:18px}}
@media(max-width:900px){.header-shell .desktop-nav,.header-shell .header-cta{display:none}.header-shell .site-header{min-height:76px;flex-wrap:nowrap;position:static}.mobile-menu{display:block;position:static}.mobile-menu>summary{display:flex;align-items:center;gap:13px;font-size:12px;font-weight:700;color:#253c60;cursor:pointer;list-style:none;min-height:44px;padding:8px 0 8px 14px}.menu-lines{display:block;width:18px;height:12px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative}.menu-lines:after{content:'';position:absolute;top:4px;left:0;width:18px;border-top:1.5px solid currentColor}.header-shell .mobile-nav{position:absolute;top:100%;left:0;right:0;z-index:45;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 24px;background:#fff;border-bottom:1px solid #c7d5eb;box-shadow:0 18px 30px #19355515;max-height:calc(100dvh - 120px);overflow-y:auto;width:auto}.mobile-nav>.nav-disclosure>summary,.mobile-nav>.nav-method-link{display:flex;justify-content:space-between;align-items:center;font-size:14px;min-height:52px;padding:12px 0;border-bottom:1px solid var(--ux-border);text-decoration:none;color:#273d5c;list-style:none}.mobile-nav .nav-panel{position:static;transform:none;width:auto;box-shadow:none;border:0;border-radius:0;padding:10px 0}.mobile-nav .nav-panel-intro{display:none}.mobile-nav .nav-tool-groups{padding:0;grid-template-columns:1fr 1fr;gap:12px}.mobile-nav .guides-panel>a{font-size:13px;padding:12px 0}.header-shell .mobile-nav .mobile-cta{margin-top:18px;font-size:13px}.header-shell .mobile-privacy{justify-content:center;text-decoration:underline;font-size:12px;margin-top:12px}.screen-workspace{grid-template-columns:1fr}.pattern-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pattern-choice{min-height:83px}.screen-workspace .screen-stage{height:480px;min-height:480px}.palette-note{max-width:650px}}
@media(max-width:600px){.utility-bar{gap:8px;min-height:40px}.utility-note{font-size:10px;gap:7px}.utility-tagline,.utility-divider{display:none}.utility-bar .languages{gap:1px;font-size:10px}.utility-bar .languages a{gap:5px;padding:5px 6px;min-height:34px}.language-flag{width:18px;height:13px}.header-shell .brand{font-size:24px}.header-shell .clarity-mark{width:30px;height:30px}.header-shell .site-header{min-height:72px}.home-heading{padding-top:28px}.mobile-nav .nav-tool-groups{grid-template-columns:1fr;gap:0}.mobile-nav .nav-tool{min-height:68px}.mobile-nav .nav-group-label{margin-top:14px}.inspection-chrome{padding:20px;display:block}.article-body .inspection-chrome h2{font-size:22px}.inspection-badge{margin-top:13px;font-size:10px}.screen-tool .screen-intro{padding:18px 20px;gap:10px}.screen-intro .primary{width:100%}.screen-workspace{padding:14px;gap:15px}.pattern-grid{gap:5px}.pattern-choice{padding:5px;gap:6px;font-size:9px;border-radius:6px;min-height:82px}.pattern-color{height:24px}.screen-workspace .screen-toolbar{left:10px;right:10px;bottom:10px;padding:15px}.screen-workspace .screen-stage{min-height:450px;height:450px}.screen-toolbar-top{gap:10px;grid-template-columns:minmax(0,1fr) auto}.screen-tool .screen-status{padding:14px 18px}.screen-tool .screen-help{padding:0 18px 18px}.screen-tool{border-radius:14px}.screen-actions button{font-size:11px}.site-footer{margin-top:28px}}
@media(max-width:370px){.utility-note{display:none}.utility-bar{justify-content:flex-end}.pattern-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.pattern-choice{font-size:8px}.screen-workspace{padding:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.nav-chevron,.screen-actions button{transition:none}}

@media(max-width:600px){.pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pattern-choice{font-size:10px;min-height:85px}}
@media(max-width:370px){.pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}