html{overflow-x:hidden}body{color:#222;background:#f7f9fb;min-height:100vh;margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif;transition:background .2s,color .2s;overflow-x:hidden}h1{text-align:center;color:#222;letter-spacing:1px;margin-top:0;font-size:2.2rem;transition:color .2s}#app{background:#fff;border-radius:12px;flex-direction:column;gap:1.2em;max-width:500px;margin:1.5rem auto;padding:2rem 2.5rem;transition:background .2s,box-shadow .2s;display:flex;box-shadow:0 4px 24px #00000014}main{flex-direction:column;gap:1.2em;display:flex}.form-row{flex-wrap:wrap;align-items:center;gap:1.2em;margin-bottom:.5em;display:flex}.form-row label{text-align:right;min-width:80px;margin-bottom:0}.amount-group{flex-direction:row;align-items:center;width:100%;margin-top:.2em;margin-bottom:.2em;display:flex}.amount-group input[type=number]{flex-grow:1;width:100%;min-width:0}.amount-group button{width:2.2em;min-width:2.2em;max-width:2.2em;height:2.2em;box-shadow:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:.15em;margin-right:0;padding:0;font-size:1.2em;line-height:1;display:flex}.theme-row{justify-content:flex-end;align-items:center;gap:.7em;margin-top:1.5em;margin-bottom:0;display:flex}.theme-row label{text-align:left;min-width:0;margin-bottom:0;font-weight:500}label{margin-right:.5em;font-weight:500}select,input[type=number]{min-width:120px;color:inherit;background:#f5f7fa;border:1px solid #cfd8dc;border-radius:6px;margin-right:0;padding:.4em .8em;font-size:1em;transition:border .2s,background .2s,color .2s}select:focus,input[type=number]:focus{border:1.5px solid #1976d2}button{color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#1976d2;border:none;border-radius:6px;margin-top:1em;margin-right:.5em;padding:.5em 1.2em;font-size:1em;font-weight:500;transition:background .2s,box-shadow .2s;box-shadow:0 2px 8px #1976d214}button:disabled{cursor:not-allowed;background:#b0bec5}h2{color:#1976d2;border-bottom:1px solid #e3e8ee;margin-top:.5em;margin-bottom:.5em;padding-bottom:.3em;font-size:1.3em;transition:color .2s,border-bottom .2s}#result{word-break:break-all;color:#111;background:#f5f7fa;border-radius:6px;min-height:2em;margin-top:.5em;padding:1em;font-family:Fira Mono,Consolas,monospace;font-size:1em;transition:background .2s,color .2s;box-shadow:0 1px 4px #00000008}.form-row button{align-self:flex-end;margin-top:0}select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23333\" height=\"16\" viewBox=\"0 0 20 20\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z\"/></svg>");background-position:right .7em center;background-repeat:no-repeat;background-size:1em;padding-right:2.2em}body.dark-mode select{background-image:url("data:image/svg+xml;utf8,<svg fill=\"%23fff\" height=\"16\" viewBox=\"0 0 20 20\" width=\"16\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M7.293 7.293a1 1 0 011.414 0L10 8.586l1.293-1.293a1 1 0 111.414 1.414l-2 2a1 1 0 01-1.414 0l-2-2a1 1 0 010-1.414z\"/></svg>")}@media (width<=600px){h1{margin-top:0;font-size:1.5rem}#app{max-width:100vw;box-shadow:none;border-radius:0;margin:0;padding:1em .5em 1.5em}.form-row{flex-direction:column;align-items:stretch;gap:.7em;margin-bottom:0}.form-row label{text-align:left;min-width:0}select,input[type=number]{width:100%;min-width:0;font-size:1em}button{width:100%;margin-top:.7em;margin-right:0;font-size:1em}#result{padding:.7em;font-size:.95em}.amount-group{align-items:center;width:100%;display:flex}.amount-group input[type=number]{text-align:left;flex-grow:1;width:100%;min-width:0;padding:.5em .7em;font-size:1.1em}.amount-group button{width:2.2em;min-width:2.2em;max-width:2.2em;height:2.2em;box-shadow:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-left:.15em;margin-right:0;padding:0;font-size:1.2em;line-height:1;display:flex}.theme-row{justify-content:flex-start;margin-top:1em}label[for=cuid-length-input]{flex-direction:column;align-items:stretch;display:flex}label[for=cuid-length-input] input{box-sizing:border-box;min-width:0;margin-top:0;width:100%!important}}@media (width<=400px){h1{font-size:1.1rem}#app{padding:.5em .1em 1em}h2{font-size:1em}#result{padding:.4em;font-size:.85em}}@media (prefers-color-scheme:dark){body:not(.light-mode){color:#fff;background:#181a1b}h1{color:#fff}#app{background:#23272b;box-shadow:0 4px 24px #00000052}select,input[type=number]{color:#fff;background:#23272b;border:1px solid #444}select:focus,input[type=number]:focus{border:1.5px solid #90caf9}button{color:#181a1b;background:#90caf9}button:disabled{color:#888;background:#444}h2{color:#90caf9;border-bottom:1px solid #444}#result{color:#fff;background:#23272b}}body.dark-mode{color:#fff;background:#181a1b}body.dark-mode h1{color:#fff}body.dark-mode #app{background:#23272b;box-shadow:0 4px 24px #00000052}body.dark-mode select,body.dark-mode input[type=number]{color:#fff;background:#23272b;border:1px solid #444}body.dark-mode select:focus,body.dark-mode input[type=number]:focus{border:1.5px solid #90caf9}body.dark-mode button{color:#181a1b;background:#90caf9}body.dark-mode button:disabled{color:#888;background:#444}body.dark-mode h2{color:#90caf9;border-bottom:1px solid #444}body.dark-mode #result{color:#fff;background:#23272b}body.light-mode{color:#222;background:#f7f9fb}body.light-mode h1{color:#222}body.light-mode #app{background:#fff;box-shadow:0 4px 24px #00000014}body.light-mode select,body.light-mode input[type=number]{color:#222;background:#f5f7fa;border:1px solid #cfd8dc}body.light-mode select:focus,body.light-mode input[type=number]:focus{border:1.5px solid #1976d2}body.light-mode button{color:#fff;background:#1976d2}body.light-mode button:disabled{color:#fff;background:#b0bec5}body.light-mode h2{color:#1976d2;border-bottom:1px solid #e3e8ee}body.light-mode #result{color:#111;background:#f5f7fa}