.pg{background:#f5fafb;border-top:3px solid #00aac9;padding:28px 30px 30px;margin:10px 0 40px}
.pg-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px}
.pg-mode{display:block;text-align:left;background:#fff;border:1px solid #d9e6e8;padding:14px 16px;cursor:pointer;font-family:Brutal,Arial,sans-serif;color:#333;transition:border-color .2s,box-shadow .2s}
.pg-mode b{display:block;font:500 17px/22px Brutal;color:#333}
.pg-mode span{display:block;font:300 13px/18px Brutal;color:#5a6563;margin-top:4px}
.pg-mode:hover{border-color:#00aac9}
.pg-mode.on{border-color:#00aac9;box-shadow:inset 0 0 0 1px #00aac9}.pg-mode.on b{color:#00aac9}
.pg-out{background:#fff;border:1px solid #d9e6e8;padding:22px 22px 20px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.pg-pass{flex:1 1 300px;min-width:0;font:500 28px/36px "SFMono-Regular",Menlo,Consolas,monospace;color:#333;word-break:break-all;letter-spacing:.5px}
.pg-btns{display:flex;gap:10px;flex-wrap:wrap}
.pg .button{width:170px;height:40px;font:500 13px/40px Brutal;margin:0;cursor:pointer;border:0}
.pg .button.ghost{background:transparent;border:1px solid #00aac9;color:#00aac9;line-height:38px}
.pg .button.ghost .hover_bg{background:#00aac9}.pg .button.ghost:hover{color:#fff}
.pg-meter{margin:18px 0 8px}
.pg-bar{height:8px;background:#e3ecec;overflow:hidden}.pg-bar i{display:block;height:100%;width:0;background:#ff4e42;transition:width .4s,background .4s}
.pg-meta{display:flex;justify-content:space-between;font:300 13px/20px Brutal;color:#5a6563;margin-top:6px}
.pg-opts{margin:20px 0 6px}
.pg-len{display:block;text-align:left;margin:0}.pg-len span{display:block;font:300 16px/24px Brutal;color:#333;margin:0 0 8px}.pg-len b{font-weight:500;color:#dd1b70}
.pg-len input{display:block;width:100%;height:24px;margin:0;padding:0;border:0;background:transparent;-webkit-appearance:auto;appearance:auto;accent-color:#00aac9;cursor:pointer}
.pg-checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:18px}
.pg-checks label{display:flex;align-items:center;justify-content:flex-start;text-align:left;float:none;width:auto;margin:0;gap:10px;font:300 16px/22px Brutal;color:#333;cursor:pointer}
.pg-checks input{width:18px;height:18px;accent-color:#00aac9;flex:none}
html body .pg-h{font:500 20px/26px Brutal;color:#333;margin:28px 0 10px;text-align:left}
.pg-list{list-style:none;margin:0;padding:0}
.pg-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1px solid #e3ecec;border-top:0;padding:10px 16px;font:400 17px/24px "SFMono-Regular",Menlo,Consolas,monospace;color:#333;cursor:pointer;transition:background .2s}
.pg-list li:first-child{border-top:1px solid #e3ecec}
.pg-list li:hover{background:#eaf7fa}
.pg-list li span{word-break:break-all}.pg-list li i{flex:none;font:300 12px/18px Brutal;color:#00aac9;font-style:normal;text-transform:uppercase;letter-spacing:1px}
.pg-steps{margin:0 0 18px 20px;padding:0}.pg-steps li{font:300 17px/27px Brutal;color:#333;padding:0 0 6px}
.pg-toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:#333;color:#fff;font:300 15px/22px Brutal;padding:10px 22px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200}
.pg-toast.on{opacity:1;transform:translate(-50%,0)}
.pg-about .pg-note{background:#d8ede2;border-left:4px solid #00aac9;padding:14px 18px;font:300 15px/23px Brutal;color:#2f3b37}
@media (max-width:959px){.pg{padding:20px 16px 22px}.pg-modes,.pg-checks{grid-template-columns:1fr}.pg-pass{font-size:22px;line-height:30px}.pg .button{width:100%}.pg-btns{width:100%}.pg-btns .button{flex:1 1 140px;width:auto}}