:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-0:#07080c;--bg-1:#0c0e14;--bg-2:#12151e;--bg-3:#181c28;--bg-4:#1f2433;--border:#ffffff12;--border-strong:#ffffff1f;--border-accent:#3dd68c59;--text-0:#f2f4f8;--text-1:#c4cad6;--text-2:#8b93a7;--text-3:#5c6478;--accent:#3dd68c;--accent-dim:#3dd68c1f;--accent-glow:#3dd68c38;--warn:#f0b429;--warn-dim:#f0b42924;--danger:#f07178;--danger-dim:#f0717824;--radius-sm:8px;--radius:12px;--radius-lg:20px;--radius-xl:28px;--shadow:0 24px 80px #00000073;--ring:0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);--font-sans:"Inter", system-ui, -apple-system, sans-serif;--font-serif:"Instrument Serif", Georgia, "Times New Roman", serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--ease:cubic-bezier(.22, 1, .36, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;overflow-x:clip}body{max-width:100%;min-height:100dvh;font-family:var(--font-sans);color:var(--text-1);background:radial-gradient(1200px 600px at 50% -10%, #3dd68c14, transparent 55%), radial-gradient(800px 400px at 100% 0%, #648cff0d, transparent 50%), var(--bg-0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:15px;line-height:1.5;overflow-x:clip}button,input{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}code{font-family:var(--font-mono)}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:100;background:var(--bg-2);border:1px solid var(--border-strong);color:var(--text-0);transition:transform .18s var(--ease);border-radius:8px;padding:.55rem .85rem;font-size:.85rem;font-weight:600;text-decoration:none;position:absolute;top:.75rem;left:.75rem;transform:translateY(-150%)}.skip-link:focus{box-shadow:var(--ring);outline:none;transform:none}.mono{font-family:var(--font-mono)}.page{width:min(720px,100% - 2rem);max-width:100%;animation:rise .7s var(--ease) both;margin:0 auto;padding:3.5rem 0 4rem}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.hero{text-align:center;margin-bottom:2.25rem}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin:0 0 .75rem;font-size:.72rem;font-weight:600}.title{font-family:var(--font-serif);letter-spacing:-.02em;color:var(--text-0);margin:0;font-size:clamp(2.5rem,7vw,3.75rem);font-weight:400;line-height:1.05}.lede{max-width:34rem;color:var(--text-2);margin:1rem auto 0;font-size:.98rem;line-height:1.6}.panel{background:linear-gradient(180deg, #ffffff08, transparent 40%), var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow);overflow:hidden}.matrix{border-bottom:1px solid var(--border);padding:1.5rem 1.5rem 1.25rem}.matrix-grid{grid-template-columns:minmax(4.5rem,1.1fr) repeat(3,1fr);align-items:stretch;gap:.5rem;display:grid}.matrix-corner{min-height:1px}.matrix-role{text-align:center;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem .25rem .6rem;display:flex}.role-title{letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);font-size:.72rem;font-weight:600}.role-hint{color:var(--text-3);font-size:.68rem;line-height:1.3;display:none}.matrix-perm{color:var(--text-1);align-items:center;gap:.55rem;padding-right:.35rem;display:flex}.perm-letter{background:var(--bg-3);border:1px solid var(--border);width:1.55rem;height:1.55rem;font-family:var(--font-mono);color:var(--accent);border-radius:6px;place-items:center;font-size:.78rem;font-weight:600;display:grid}.perm-title{color:var(--text-1);font-size:.88rem;font-weight:500}.bit{border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--border);min-height:3.1rem;transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);-webkit-user-select:none;user-select:none;place-items:center;display:grid}.bit:hover{border-color:var(--border-strong);background:var(--bg-3)}.bit:focus-visible{box-shadow:var(--ring);outline:none}.bit:active{transform:scale(.97)}.bit.is-on{background:var(--accent-dim);border-color:var(--border-accent);box-shadow:inset 0 0 0 1px #3dd68c14, 0 0 24px var(--accent-glow)}.bit-glyph{font-family:var(--font-mono);color:var(--text-3);transition:color .18s var(--ease);font-size:1.05rem;font-weight:600}.bit.is-on .bit-glyph{color:var(--accent)}.outputs{border-bottom:1px solid var(--border);grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:1.5rem;display:grid}.outputs>*{min-width:0}.field-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:.5rem;font-size:.72rem;font-weight:600;display:block}.octal-row{background:var(--bg-0);border:1px solid var(--border);border-radius:var(--radius);min-width:0;max-width:100%;transition:border-color .18s var(--ease), box-shadow .18s var(--ease);align-items:center;gap:.15rem;padding:.35rem .9rem;display:flex}.octal-row:focus-within{border-color:var(--border-accent);box-shadow:0 0 0 3px var(--accent-dim)}.octal-prefix{font-family:var(--font-mono);color:var(--text-3);-webkit-user-select:none;user-select:none;font-size:clamp(2rem,6vw,2.75rem);font-weight:500;line-height:1}.octal-input{width:100%;min-width:0;font-family:var(--font-mono);letter-spacing:.06em;color:var(--text-0);caret-color:var(--accent);background:0 0;border:none;outline:none;flex:1 1 0;padding:.35rem 0;font-size:clamp(2rem,6vw,2.75rem);font-weight:600;line-height:1.15}.field-help{color:var(--text-3);margin:.45rem 0 0;font-size:.78rem}.output-secondary{flex-wrap:wrap;gap:1rem 1.75rem;display:flex}.stat{flex-direction:column;gap:.3rem;display:flex}.stat-label{letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-size:.72rem;font-weight:600}.stat-value{color:var(--text-0);letter-spacing:.04em;font-size:1.05rem;font-weight:500}.strength{border:1px solid #0000;border-radius:999px;align-items:center;gap:.45rem;width:fit-content;padding:.28rem .65rem .28rem .5rem;font-size:.82rem;font-weight:600;display:inline-flex}.strength-dot{background:currentColor;border-radius:50%;width:.5rem;height:.5rem;box-shadow:0 0 10px}.strength-strong{color:var(--accent);background:var(--accent-dim);border-color:#3dd68c38}.strength-moderate{color:var(--warn);background:var(--warn-dim);border-color:#f0b42940}.strength-weak{color:var(--danger);background:var(--danger-dim);border-color:#f0717840}.human{border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--border);color:var(--text-2);overflow-wrap:anywhere;margin:0;padding:.85rem 1rem;font-size:.9rem;line-height:1.55}.mono-soft{font-family:var(--font-sans)}.command-block{grid-template-columns:minmax(0,1fr);gap:.55rem;min-width:0;display:grid}.command-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.65rem 1rem;min-width:0;display:flex}.filename-label{align-items:center;gap:.45rem;min-width:0;display:inline-flex}.filename-label-text{letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);white-space:nowrap;font-size:.72rem;font-weight:500}.filename-input{border:1px solid var(--border);background:var(--bg-2);width:min(10.5rem,36vw);min-width:0;max-width:100%;font-family:var(--font-mono);color:var(--text-1);text-align:right;transition:border-color .18s var(--ease);border-radius:6px;padding:.3rem .55rem;font-size:.8rem}.filename-input::placeholder{color:var(--text-3);opacity:.7}.filename-input:focus{border-color:var(--border-accent);outline:none}.command-row{align-items:stretch;gap:.6rem;min-width:0;display:flex}.command{border-radius:var(--radius);border:1px solid var(--border);background:#05060a;flex-wrap:wrap;flex:1;align-items:center;gap:.45rem;min-width:0;padding:.85rem 1rem;font-size:.92rem;line-height:1.4;display:flex;overflow-x:auto}.prompt{color:var(--text-3);-webkit-user-select:none;user-select:none}.cmd{color:var(--text-1)}.cmd-mode{color:var(--accent);font-weight:600}.cmd-file{color:#7eb8ff}.copy-btn{border-radius:var(--radius);background:var(--bg-3);border:1px solid var(--border-strong);color:var(--text-0);transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);flex-shrink:0;justify-content:center;align-items:center;gap:.4rem;padding:0 1.05rem;font-size:.85rem;font-weight:600;display:inline-flex}.copy-btn:hover{background:var(--bg-4);border-color:#ffffff2e}.copy-btn:focus-visible{box-shadow:var(--ring);outline:none}.copy-btn.is-copied{background:var(--accent-dim);border-color:var(--border-accent);color:var(--accent)}.presets{border-bottom:1px solid var(--border);padding:1.25rem 1.5rem 1.35rem}.section-head{margin-bottom:.75rem}.section-title{letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0;font-size:.72rem;font-weight:600}.preset-list{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.preset{border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--border);text-align:left;transition:background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);flex-direction:column;align-items:flex-start;gap:.15rem;padding:.7rem .75rem;display:flex}.preset:hover{background:var(--bg-3);border-color:var(--border-strong)}.preset:focus-visible{box-shadow:var(--ring);outline:none}.preset:active{transform:scale(.98)}.preset.is-active{background:var(--accent-dim);border-color:var(--border-accent)}.preset-octal{color:var(--text-0);letter-spacing:.04em;font-size:.95rem;font-weight:600}.preset.is-active .preset-octal{color:var(--accent)}.preset-desc{color:var(--text-3);font-size:.72rem}.special{padding:.35rem 1.5rem 1.15rem}.special-toggle{width:100%;color:var(--text-2);transition:color .18s var(--ease);justify-content:space-between;align-items:center;padding:.75rem .15rem;font-size:.82rem;font-weight:600;display:flex}.special-toggle:hover{color:var(--text-0)}.special-toggle:focus-visible{color:var(--accent);outline:none}.special-chevron{color:var(--text-3);transition:transform .22s var(--ease);place-items:center;display:grid}.special-chevron.is-open{transform:rotate(180deg)}.special-panel{padding-bottom:.35rem;display:none}.special-panel.is-open{animation:rise .3s var(--ease) both;display:block}.special-bits{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.special-bit{border-radius:var(--radius-sm);background:var(--bg-2);border:1px solid var(--border);text-align:left;transition:background .18s var(--ease), border-color .18s var(--ease);grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:.1rem .55rem;padding:.75rem;display:grid}.special-bit:hover{background:var(--bg-3);border-color:var(--border-strong)}.special-bit:focus-visible{box-shadow:var(--ring);outline:none}.special-bit.is-on{background:var(--accent-dim);border-color:var(--border-accent)}.special-value{background:var(--bg-0);border:1px solid var(--border);width:1.7rem;height:1.7rem;color:var(--text-2);border-radius:6px;grid-row:1/span 2;place-items:center;font-size:.85rem;font-weight:600;display:grid}.special-bit.is-on .special-value{color:var(--accent);border-color:var(--border-accent)}.special-label{color:var(--text-0);font-size:.85rem;font-weight:600}.special-hint{color:var(--text-3);grid-column:2;font-size:.68rem;line-height:1.35}.footer{text-align:center;margin-top:2rem}.footer p{color:var(--text-3);margin:0;font-size:.8rem}.footer-credit{margin-top:.35rem!important;font-size:.75rem!important}.footer a{color:var(--text-2);transition:color .18s var(--ease);text-decoration:none}.footer a:hover{color:var(--accent)}.footer-mark{color:var(--text-2)}.footer-sep{opacity:.5;margin:0 .4rem}@media (width<=640px){.page{width:min(100% - 1.25rem,720px);padding:2rem 0 3rem}.matrix{padding:1.1rem}.matrix-grid{grid-template-columns:minmax(0,3.6rem) repeat(3,minmax(0,1fr));gap:.4rem}.perm-title{display:none}.bit{min-height:2.85rem}.outputs,.presets,.special{padding-left:1.1rem;padding-right:1.1rem}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.special-bits{grid-template-columns:minmax(0,1fr)}.command-row{flex-direction:column}.copy-btn{min-height:2.75rem}.filename-label{flex-wrap:wrap;justify-content:flex-end}.filename-input{width:min(10.5rem,100%)}.role-hint{display:none}}@media (width>=641px){.role-hint{display:block}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}