.uid{display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,.65fr);border:1px solid rgb(var(--border-color));border-radius:var(--rounded-block);overflow:visible;background:rgb(var(--background));margin-top:var(--spacing-8)}
.uid [hidden]{display:none!important}.uid .uid-settings,.uid .uid-workspace{min-width:0;padding:clamp(20px,2.5vw,32px)}.uid .uid-settings{border:0;border-inline-end:1px solid rgb(var(--border-color));margin:0;background:var(--uid-settings-background);color:rgb(var(--text-color));border-start-start-radius:var(--rounded-block);border-end-start-radius:var(--rounded-block)}.uid .uid-settings legend{float:left;width:100%;margin-bottom:6px}.uid .uid-settings legend+label{clear:both}
.uid label{display:block;font-size:.85rem;font-weight:600;margin:16px 0 7px}.uid :is(.input,.select,.textarea){width:100%;min-width:0;background:rgb(var(--background));font-variant-numeric:tabular-nums}.uid .select-chevron{pointer-events:none}.uid .uid-select-control{--background:var(--dialog-background);--text-color:var(--text-primary);--border-color:var(--text-primary)/.12;color:rgb(var(--text-color))}.uid .uid-byte-order-note{font-size:.75rem;line-height:1.5;margin-top:8px;color:rgb(var(--text-color)/.8)}.uid .uid-format-note{font-size:.75rem;line-height:1.5;margin-top:16px}.uid .uid-byte-order-value{font:.9rem/1.5 ui-monospace,monospace}.uid .uid-workflow{min-width:0}.uid .uid-workflow .h4{margin-bottom:4px}.uid .uid-workflow+.uid-workflow{border-top:1px solid rgb(var(--border-color));margin-top:28px;padding-top:28px}
.uid .uid-inputrow{display:flex;align-items:stretch;gap:10px}.uid .uid-inputrow .input{flex:1;min-width:0}.uid .button{font-size:.85rem;padding:12px 20px}.uid .uid-copyrow{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:center}.uid .uid-copyrow .input{background:#e0f4e9;color:#1a1a1a;font:.9rem/1.5 ui-monospace,monospace}.uid .uid-icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgb(var(--border-color));border-radius:var(--rounded-button);background:rgb(var(--text-color)/.035);color:inherit;cursor:pointer;transition:background .15s}.uid .uid-icon-button:hover{background:#e0f4e9;color:#1a1a1a}.uid .uid-copyrow--list{align-items:start}.uid .textarea{font:.85rem/1.6 ui-monospace,monospace;resize:vertical}.uid .uid-copyrow--list .textarea{background:rgb(var(--text-color)/.025)}.uid .uid-list-actions{display:flex;justify-content:flex-end;margin-top:12px}.uid .uid-secondary{--button-background:var(--text-color)/.07;--button-text-color:var(--text-color);box-shadow:none}
.uid .uid-padding{display:flex;align-items:start;gap:10px;margin-top:18px}.uid .uid-padding label{margin:0;font-size:.8rem}.uid .uid-padding input{flex:none;margin-top:3px;accent-color:rgb(var(--text-color));width:18px;height:18px}.uid .uid-padding:has(input:disabled){opacity:.5}.uid :is(button,input,select,textarea):focus-visible{outline:3px solid currentColor;outline-offset:3px}.uid button:disabled{opacity:.45;cursor:not-allowed}.uid .uid-error{background:#fff0ec;color:#8c241d;padding:12px;margin-top:12px;border-radius:var(--rounded);font-size:.85rem}.uid .uid-line-errors{color:#8c241d;font-size:.8rem;line-height:1.6;margin-top:10px;padding-left:18px;list-style:disc}.uid .uid-line-errors:empty{display:none}.uid .uid-status{font-size:.8rem;margin-top:8px}.uid .uid-list-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.uid .uid-count{font-size:.75rem;color:rgb(var(--text-color)/.7)}
@media(max-width:799px){.uid{grid-template-columns:1fr}.uid .uid-settings{border-end-start-radius:0;border-start-end-radius:var(--rounded-block);border-inline-end:0;border-bottom:1px solid rgb(var(--border-color));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);column-gap:16px;align-items:center}.uid .uid-settings legend{float:none;margin-bottom:12px;grid-column:1/-1}.uid .uid-settings>label{margin:0}.uid .uid-settings .form-control{margin:5px 0}.uid .uid-padding,.uid .uid-format-note,.uid .uid-byte-order-note{grid-column:1/-1}.uid .uid-workflow+.uid-workflow{margin-top:24px;padding-top:24px}}
@media(max-width:399px){.uid .uid-inputrow{flex-wrap:wrap}.uid .uid-inputrow .input{flex:1 1 100%}.uid .uid-inputrow .button{margin-left:auto}}
.uid-draft{display:inline-block;font-size:.75rem;font-weight:600;background:#fff3cb;color:#5b4400;border:1px solid #d8be67;padding:8px 14px;border-radius:var(--rounded-button);margin-bottom:var(--spacing-6)}
main:has(nfc-uid-converter) :is([id$="__instructions"],[id$="__lengths"],[id$="__benefits"],[id$="__guides"]) .multi-column__item{background:#fff;border-radius:var(--rounded);padding:clamp(24px,3vw,36px);min-width:0}
main:has(nfc-uid-converter) [id$="__instructions"] .multi-column__item > .v-stack > p{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--rounded-full);background:rgb(var(--button-background-primary));color:rgb(var(--button-text-primary));margin:0}
main:has(nfc-uid-converter) .uid-table-panel{max-width:960px;margin-inline:auto;padding:clamp(20px,3vw,40px)}main:has(nfc-uid-converter) .uid-table-panel caption{text-align:start;font-weight:600;margin-bottom:var(--spacing-6)}
.uid-hero{position:relative;isolation:isolate;overflow:hidden;background:#15192a;color:#fff;--text-color:255 255 255;min-height:430px;display:flex;align-items:center}
.uid-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;z-index:-1}.uid-hero-copy{width:55%;max-width:850px;margin-inline-start:max(48px,calc((100vw - var(--container-max-width,1600px))/2));padding:64px 0;position:relative}.uid-hero-copy .h1{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.1;max-width:700px}.uid-hero-copy p{font-size:clamp(.9rem,1.1vw,1.05rem);max-width:660px;line-height:1.7}.uid-hero-copy .uid-draft{font-size:.7rem;line-height:1.5}
@media(min-width:1000px){main:has(nfc-uid-converter) [id$="__products"] .product-list{--product-list-carousel-item-width:calc((var(--container-inner-width) + var(--container-outer-width) - var(--product-list-column-gap) * 3) / 3.5)!important}}
@media(max-width:999px){.uid-hero{display:flex;flex-direction:column;align-items:stretch}.uid-hero-copy{width:auto;max-width:none;margin:0;padding:40px 32px 8px}.uid-hero-copy .h1{max-width:none}.uid-hero-copy p{max-width:720px}.uid-hero-image{position:relative;inset:auto;order:2;z-index:0;width:100%;height:300px;object-fit:cover;object-position:right center}}
@media(max-width:499px){.uid-hero-copy{padding:32px 24px 0}.uid-hero-image{height:230px}}