@import "https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";:root{--font-UI:"Noto Sans", sans-serif;--font-display:"Courier Prime", monospace;--desktop-bg:teal;--window-bg:silver;--border-light:#fff;--border-dark:gray;--titlebar-start:#000082;--titlebar-end:#1084d0;--text-black:#000;--display-bg:#000;--display-text:#2ac45a;--display-number:#3fb2e6;--display-symbol:#d07d4a}body{background-color:var(--desktop-bg);font-family:var(--font-UI);color:var(--text-black);box-sizing:border-box;justify-content:center;align-items:center;min-height:100vh;margin:0;font-size:11px;display:flex}.password-generator{background:var(--window-bg);border:2px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);box-shadow:1px 1px 0 var(--text-black);width:min(420px,100vw - 16px);max-width:calc(100vw - 16px);margin:8px;overflow:hidden}.title-bar{background:linear-gradient(to right, var(--titlebar-start), var(--titlebar-end));padding:3px 8px}.title-bar span{color:#fff;font-weight:700}.generator-body{padding:6px 8px 4px}.section-divider{border-top:1px solid var(--border-dark);border-bottom:1px solid var(--border-light);margin:6px 0}.control-row{align-items:center;gap:6px;padding:3px 0;display:flex}.control-label{width:66px;font-weight:700}.control-content{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.length-slider{appearance:none;background:var(--border-dark);border:1px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);cursor:pointer;outline:none;flex:1;width:100%;min-width:0;height:3px}.length-slider::-webkit-slider-thumb{background:var(--window-bg);border:2px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);cursor:pointer;-webkit-appearance:none;width:11px;height:20px}.length-slider::-moz-range-thumb{background:var(--window-bg);border:2px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);cursor:pointer;border-radius:0;width:11px;height:20px}.length-value{background:var(--border-light);border:2px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);text-align:center;min-width:32px;padding:1px 4px}.toggle-button,.action-button{all:unset;border:2px solid;border-color:var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);cursor:pointer}.toggle-button{align-items:center;gap:6px;padding:2px 8px;display:inline-flex}.toggle-button:active,.action-button:active{border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark)}.toggle-button:active{padding:3px 7px 1px 9px}.toggle-indicator{background:var(--border-light);border:2px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);justify-content:center;align-items:center;width:13px;height:13px;font-size:9px;line-height:1;display:inline-flex;box-shadow:inset 1px 1px #404040}.display-label{margin:0 0 3px;font-weight:700}.password-display{background:var(--display-bg);border:2px solid;border-color:var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);font-family:var(--font-display);letter-spacing:2px;color:var(--display-text);word-break:break-all;flex-wrap:wrap;align-items:center;min-height:48px;margin-bottom:6px;padding:8px 10px;font-size:15px;font-weight:700;line-height:1.2;display:flex;box-shadow:inset 1px 1px #303030}.symbol-char{color:var(--display-symbol)}.number-char{color:var(--display-number)}.action-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;display:grid}.action-button{box-sizing:border-box;width:100%;box-shadow:1px 1px 0 var(--text-black);text-align:center;justify-content:center;align-items:center;padding:4px 10px;font-weight:700;display:flex}.action-button:active{box-shadow:none;padding:5px 9px 3px 11px}.action-button:focus-visible,.toggle-button:focus-visible{outline:1px dotted var(--text-black);outline-offset:-4px}@media (width<=520px){.password-generator{width:calc(100vw - 16px)}.generator-body{padding:8px}.control-row{flex-direction:column;align-items:stretch}.control-label{width:auto}.control-content{flex-wrap:wrap;gap:8px;min-width:0}.length-slider{width:100%;min-width:0}.length-value{flex-shrink:0}.toggle-button{flex:auto;justify-content:center}.action-buttons{flex-direction:column;width:100%}.action-button{width:100%;min-width:0;display:block}.password-display{letter-spacing:1px;font-size:13px}}