:root{--color-bg: #1a1a1f;--color-surface: rgba(40, 40, 52, .15);--color-text: #cdd6f4;--color-text-dim: #585b70;--color-hairline: rgba(255, 255, 255, .07);--color-copy-hint: rgba(205, 214, 244, .35);--uuid-v1: #e5c07b;--uuid-v3: #c678dd;--uuid-v4: #61afef;--uuid-v5: #98c379;--uuid-v6: #e06c75;--uuid-v7: #56b6c2;--seg-time: #e5c07b;--seg-version: #61afef;--seg-variant: #c678dd;--seg-random: #abb2bf;--seg-node: #56b6c2;--seg-clock: #98c379;--seg-sep: #585b70;--ribbon-height: 3.375rem;--ribbon-height-mode: 4.125rem;--ribbon-px: 1.5rem;--ribbon-gap: .1875rem;--ribbon-font: 1.25rem;--uuid-font: clamp(1.40625rem, 3.6vw, 2.25rem);--meta-font: 1.125rem}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--color-bg);color:var(--color-text);font-family:JetBrains Mono,ui-monospace,monospace;font-weight:300;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.app__body{display:flex;flex-direction:column;align-items:center;width:100%;max-width:84.375rem;padding:0 2.25rem;position:relative;z-index:1}.ribbon{display:flex;align-items:center;gap:var(--ribbon-gap);width:100%;height:var(--ribbon-height);padding:0 var(--ribbon-px);background:transparent;border:none;-webkit-user-select:none;user-select:none}.ribbon--version{border-bottom:1px solid var(--color-hairline);justify-content:center}.ribbon--v5inputs{gap:.75rem;height:4.5rem;justify-content:center;padding:0 3rem}.ribbon--inspect-input{height:4.5rem;justify-content:center;padding:0 3rem}.ribbon--mode{height:var(--ribbon-height-mode);border-top:1px solid var(--color-hairline);justify-content:center;gap:0}.ribbon--hidden{visibility:hidden;pointer-events:none}.ribbon-btn{display:inline-flex;align-items:center;height:2.25rem;padding:0 2.0625rem;border:none;border-radius:0;background:transparent;font-family:inherit;font-size:var(--ribbon-font);font-weight:300;letter-spacing:.08em;cursor:pointer;transition:opacity .12s ease,text-shadow .12s ease,box-shadow .12s ease,font-weight .12s ease}.ribbon-btn[data-version=v1]{color:var(--uuid-v1);opacity:.4}.ribbon-btn[data-version=v3]{color:var(--uuid-v3);opacity:.4}.ribbon-btn[data-version=v4]{color:var(--uuid-v4);opacity:.4}.ribbon-btn[data-version=v5]{color:var(--uuid-v5);opacity:.4}.ribbon-btn[data-version=v6]{color:var(--uuid-v6);opacity:.4}.ribbon-btn[data-version=v7]{color:var(--uuid-v7);opacity:.4}.ribbon-btn[data-version=v1].is-active{opacity:1;font-weight:600;text-shadow:0 0 1.125rem var(--uuid-v1);box-shadow:0 1px 0 var(--uuid-v1)}.ribbon-btn[data-version=v3].is-active{opacity:1;font-weight:600;text-shadow:0 0 1.125rem var(--uuid-v3);box-shadow:0 1px 0 var(--uuid-v3)}.ribbon-btn[data-version=v4].is-active{opacity:1;font-weight:600;text-shadow:0 0 1.125rem var(--uuid-v4);box-shadow:0 1px 0 var(--uuid-v4)}.ribbon-btn[data-version=v5].is-active{opacity:1;font-weight:600;text-shadow:0 0 1.125rem var(--uuid-v5);box-shadow:0 1px 0 var(--uuid-v5)}.ribbon-btn[data-version=v6].is-active{opacity:1;font-weight:600;text-shadow:0 0 1.125rem var(--uuid-v6);box-shadow:0 1px 0 var(--uuid-v6)}.ribbon-btn[data-version=v7].is-active{opacity:1;font-weight:600;text-shadow:0 0 1.125rem var(--uuid-v7);box-shadow:0 1px 0 var(--uuid-v7)}.ribbon-btn.is-dim{opacity:.15;cursor:default}.ribbon-btn--mode{height:2.625rem;padding:0 3rem;font-size:1.125rem;font-weight:400;letter-spacing:.06em;color:var(--color-text);opacity:.35;transition:opacity .12s ease,box-shadow .12s ease}.ribbon-btn--mode.is-active{opacity:1;box-shadow:0 -1px 0 var(--color-text)}.v5-label{font-size:1rem;font-weight:300;color:var(--color-text-dim);letter-spacing:.06em;white-space:nowrap}.v5-input{flex:1;height:2.625rem;padding:0 1.5rem;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;color:var(--color-text);font-family:inherit;font-size:1.125rem;font-weight:300;outline:none;text-align:center;transition:border-color .15s ease}.v5-input::placeholder{opacity:.3}.v5-input:focus{border-color:#ffffff59}.uuid-surface{width:100%;background:var(--color-surface);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:backdrop-filter .2s ease,-webkit-backdrop-filter .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:15rem;padding:3.75rem 3rem;cursor:pointer;position:relative;margin:2.25rem 0}.uuid-surface:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.18;transition:opacity .15s ease;background:linear-gradient(#fff,#fff) top left / .75rem 1px no-repeat,linear-gradient(#fff,#fff) top left / 1px .75rem no-repeat,linear-gradient(#fff,#fff) bottom left / .75rem 1px no-repeat,linear-gradient(#fff,#fff) bottom left / 1px .75rem no-repeat}.uuid-surface:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.18;transition:opacity .15s ease;background:linear-gradient(#fff,#fff) top right / .75rem 1px no-repeat,linear-gradient(#fff,#fff) top right / 1px .75rem no-repeat,linear-gradient(#fff,#fff) bottom right / .75rem 1px no-repeat,linear-gradient(#fff,#fff) bottom right / 1px .75rem no-repeat}.uuid-surface:hover:before,.uuid-surface:hover:after{opacity:.38}.uuid-surface:hover{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.uuid-surface.is-copied:before,.uuid-surface.is-copied:after{animation:tick-pulse .8s ease forwards}@keyframes tick-pulse{0%{opacity:.18}20%{opacity:.7}to{opacity:.38}}.uuid-surface:hover .uuid-copy-hint{opacity:1}.uuid-text{font-size:var(--uuid-font);font-weight:400;letter-spacing:.1em;color:var(--color-text);word-break:break-all;text-align:center;line-height:1.5;position:relative;z-index:1}.uuid-copy-hint{position:absolute;bottom:.75rem;left:50%;transform:translate(-50%);font-size:.9375rem;font-weight:300;letter-spacing:.06em;color:var(--color-copy-hint);opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:1}.uuid-copied{position:absolute;bottom:.75rem;left:50%;transform:translate(-50%);font-size:.9375rem;font-weight:300;letter-spacing:.06em;color:var(--uuid-v5);z-index:1}.uuid-surface--inspect{cursor:pointer}.seg{font-size:var(--uuid-font);font-weight:400;letter-spacing:.1em;line-height:1.5}.seg--time{color:var(--seg-time)}.seg--version{color:var(--seg-version)}.seg--variant{color:var(--seg-variant)}.seg--random{color:var(--seg-random)}.seg--node{color:var(--seg-node)}.seg--clock{color:var(--seg-clock)}.seg--sep{color:var(--seg-sep)}.seg--plain{color:var(--color-text-dim)}.uuid-meta{margin-top:1.5rem;font-size:var(--meta-font);font-weight:300;color:var(--color-text-dim);text-align:center;width:100%;position:relative;z-index:1}.uuid-meta__row{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap}.uuid-meta__item{display:flex;flex-direction:column;align-items:center;gap:.375rem}.uuid-meta__key{color:var(--color-text-dim);font-weight:300;letter-spacing:.06em}.uuid-meta__val{color:var(--color-text);font-weight:400;letter-spacing:.04em}.inspect-input-label{font-size:1rem;font-weight:300;color:var(--color-text-dim);letter-spacing:.06em;white-space:nowrap}.inspect-input{flex:1;height:2.625rem;padding:0 1.5rem;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;color:var(--color-text);font-family:inherit;font-size:1.125rem;font-weight:300;outline:none;text-align:center;transition:border-color .15s ease}.inspect-input::placeholder{opacity:.3}.inspect-input:focus{border-color:#ffffff59}.uuid-error{font-size:1.125rem;font-weight:300;letter-spacing:.06em;color:var(--uuid-v6);margin-top:.75rem;text-align:center;position:relative;z-index:1}