/* FIG-001..008; layouts remain one vertical document at every width. */
:root{--ux-blue:#2469d8}body{padding-bottom:calc(86px + env(safe-area-inset-bottom))}.ux-state{padding:8px 12px;background:#eef5ff;color:#163e72;border-left:4px solid var(--ux-blue);font-weight:700}.ux-transaction{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0}.ux-transaction>.btn{flex:1 1 125px}.ux-transaction #uxOK,.ux-primary{background:#16477e!important;color:white!important;border:2px solid #16477e!important}.ux-cards{display:flex;gap:8px;flex-wrap:wrap;margin:7px 0 12px;max-width:100%;min-width:0}.ux-choice{flex:1 1 105px;min-width:0;min-height:48px;border:1px solid #8b9eaf;border-radius:9px;padding:10px;background:white;color:#18334f;white-space:normal;overflow-wrap:anywhere}.ux-choice[aria-checked=true]{outline:3px solid var(--ux-blue);outline-offset:0;background:#eef5ff}.ux-choice:disabled{opacity:.45}.ux-font-sample{display:block;height:44px;line-height:44px;white-space:nowrap;overflow:hidden;max-width:100%;font-synthesis:none}.ux-color{display:block;height:30px;border:1px solid #687c90;border-radius:5px;margin:4px}.ux-radio-card{display:flex!important;align-items:center;gap:7px;min-height:48px;padding:10px!important;border:1px solid #8b9eaf!important;border-radius:9px;flex:1 1 100px}.ux-radio-card:has(input:checked){outline:3px solid var(--ux-blue);background:#eef5ff}.ux-radio-card input{flex:0 0 auto}.scene-formats,.scope048,.fix043-options{display:flex;gap:8px;flex-wrap:wrap}.palette-button048{border:1px solid #8b9eaf!important;min-height:48px}.palette-button048.ux-selected{outline:3px solid var(--ux-blue);outline-offset:0}.palette-button048::after{content:attr(data-check);display:inline-block;width:1em;color:#16477e}.swatch048{border:1px solid #677b91!important}.ux-range{position:relative;display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 14px;min-width:0;max-width:100%}.ux-range input[type=range]{flex:1 1 100%;width:100%;min-width:0;height:44px;accent-color:var(--ux-accent,#3668b3);touch-action:pan-y;direction:ltr}.ux-range input[dir=rtl]{direction:rtl}.ux-range output{font-weight:700;font-variant-numeric:tabular-nums;min-width:55px}.ux-range .ux-standard-label{font-size:12px;color:#36516a}.ux-reset{min-height:44px!important;font-size:12px!important;padding:7px!important;margin-left:auto}.ux-standard-tick{position:absolute;top:11px;height:20px;width:2px;background:#173b61;pointer-events:none}.ux-range:has(.ux-range-ends) .ux-standard-tick{top:35px}.ux-range-ends{flex:1 1 100%;font-size:12px;color:#234d79}.ux-dialog-actions{display:flex;gap:8px;flex-wrap:wrap}.ux-dialog-actions button{flex:1 1 130px}#uxLeaveDialog{max-width:min(540px,calc(100vw - 20px));border:1px solid #8b9eaf;border-radius:12px;padding:18px}#uxNav{position:fixed;bottom:0;left:0;right:0;display:flex;gap:4px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:#eef5fff5;border-top:1px solid #9cafc3;z-index:90;backdrop-filter:blur(8px)}#uxNav[hidden]{display:none}#uxNav button{flex:1;min-width:0;min-height:48px;padding:6px;font-size:14px}#uxNav button[aria-current=true]{background:#d4e6ff;border:2px solid var(--ux-blue)}#uxTimeline{border:1px solid #9cafc3;border-radius:10px;padding:12px;margin:12px 0}#uxTimeline label{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}#uxTimeline input{flex:1 1 100%;min-width:0;width:100%;height:44px;accent-color:var(--ux-accent)}#uxTimeline input[dir=rtl]{direction:rtl}#uxTimeline output{font-variant-numeric:tabular-nums}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #2469d8;outline-offset:3px}.b-layout{display:flex!important;flex-direction:column!important}.b-preview,.b-entry,.b-output,.b-settings{width:100%;min-width:0}.b-preview{max-width:900px;align-self:center}.b-entry,.b-output,.b-settings{max-width:1000px;align-self:center}.ux-primary{min-height:52px;margin:8px 0;width:100%}#uxNav~*{max-width:100%}.ux-range .ux-standard-tick{max-width:100%}dialog{max-height:calc(100dvh - 24px);overflow:auto}label,fieldset{min-width:0}#uxTimeline input[type=range]{touch-action:pan-y}@media(max-width:420px){.ux-choice{flex-basis:95px}.ux-font-sample{font-size:20px!important}.ux-transaction>.btn{flex-basis:100px}#uxNav button{font-size:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
 .ux-time-track{display:flex;position:relative;height:48px;margin:10px 0 64px;min-width:0}.ux-time-track>span{display:flex;align-items:center;justify-content:center;min-width:0;color:white;font-size:11px;overflow:hidden}.ux-time-handle{position:absolute;top:38px;transform:translateX(-70%);min-height:44px;min-width:44px;max-width:85px;border:2px solid #173b61;background:white;color:#153d68;border-radius:6px;font-size:11px;touch-action:none;padding:3px}.ux-time-handle:nth-of-type(2){top:82px}.ux-time-handle:nth-of-type(4){top:82px}.ux-time-track{margin-bottom:110px}

.ux-time-track{margin-bottom:210px}.ux-time-handle:nth-of-type(2),.ux-time-handle:nth-of-type(4){top:auto}
.ux-setting-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%;font-size:12px;color:#36516a;margin:6px 0}.ux-setting-tools button{min-height:44px;max-width:100%;margin-left:auto}

/* All standard marks follow the same explicit 20px thumb geometry. */
.ux-range input[type=range]{appearance:none;-webkit-appearance:none;box-sizing:border-box;display:block;flex:1 1 100%;width:100%;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.ux-range input[type=range]::-webkit-slider-runnable-track{height:6px;border:0;border-radius:3px;background:#dce5eb}
.ux-range input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border:0;border-radius:50%;background:var(--ux-accent,#3668b3)}
.ux-range input[type=range]::-moz-range-track{height:6px;border:0;border-radius:3px;background:#dce5eb}
.ux-range input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--ux-accent,#3668b3)}
.ux-range .ux-standard-tick{height:7px;transform:translateX(-50%)}
#uxXPrimary{display:flex;justify-content:center;align-items:center;gap:12px}
#uxXPrimary .ux-x-logo{font-family:Arial,sans-serif;font-size:34px;line-height:1;font-weight:400}