@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Share+Tech+Mono&display=swap";:root{--bg: #05050F;--log-bg: rgba(5,5,18,.97);--text: #FFFFFF;--dark-gray: #A9A9A9;--ash-gray: #B2BEB5;--light-gray: #D3D3D3;--platinum: #E5E4E2;--magenta: #750075;--light-magenta: #D100D1;--light-blue: #89CFF0;--font-tech-mono: "Share Tech Mono", monospace;--font-bebas-neue: "Bebas Neue", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{min-height:100vh;background-color:var(--bg);color:var(--text);font-family:var(--font-tech-mono)}canvas{padding:4rem 0;position:fixed;inset:0;z-index:1}main{padding:1rem;position:relative;display:flex;flex-direction:column;justify-content:space-between}header{display:flex;flex-direction:column;justify-content:space-between;padding:1rem 0;pointer-events:none;z-index:20;position:relative}.logo-wrapper{display:flex;justify-content:space-between;align-items:center}#title{font-family:var(--font-bebas-neue);font-size:clamp(2rem,7vw,4rem);background-image:linear-gradient(to top,#f43b47,#453a94);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-user-select:none;user-select:none}#log-btn{padding:.375rem .875rem;font-family:var(--font-tech-mono);letter-spacing:.125rem;background:transparent;color:var(--light-gray);border:.063rem solid var(--magenta);cursor:pointer;pointer-events:all;white-space:nowrap;box-shadow:#f02eaa66 5px 5px,#f02eaa4d 10px 10px,#f02eaa33 15px 15px,#f02eaa1a 20px 20px,#f02eaa0d 25px 25px;transition:color .2s,border-color .2s,box-shadow .2s}#log-btn:hover{color:var(--platinum);border-color:var(--light-magenta);box-shadow:#e63ba766 5px 5px,#ee40ae4d 10px 10px,#e642a933 15px 15px,#f046b21a 20px 20px,#f84bb90d 25px 25px}.ctrl-btn{width:8rem;font-family:var(--font-tech-mono);font-size:.75rem;letter-spacing:.28rem;color:var(--dark-gray);border:1px solid rgba(255,255,255,.1);background:transparent;padding:.5rem .75rem;cursor:pointer;pointer-events:all;transition:color .2s,border-color .2s,box-shadow .2s}.ctrl-btn:hover{color:#fff9;border-color:#ffffff4d;box-shadow:0 0 14px #ffffff0f}.ctrl-btn.done{color:#b4d2ff80;border-color:#b4d2ff40}.ctrl-btn.done:hover{color:#b4d2ffe6;border-color:#b4d2ff80;box-shadow:0 0 14px #b4d2ff1a}#log-drawer{position:fixed;top:0;right:0;background:var(--log-bg);width:min(30rem,100vw);height:100vh;border-left:.063rem solid rgba(255,255,255,.05);z-index:50;font-family:var(--font-tech-mono);display:flex;flex-direction:column;transform:translate(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}#log-drawer.open{transform:translate(0)}#log-header{padding:2rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.06)}#log-close{background:none;border:none;color:var(--dark-gray);padding:.125rem .375rem;font-size:2rem;font-family:inherit;cursor:pointer;transition:color .2s}#log-title{font-size:1rem;color:var(--dark-gray);letter-spacing:.25rem}#log-close:hover{color:var(--light-blue)}#log-body{flex:1;overflow-y:auto}#log-binary-row{padding:1rem;border-bottom:.063rem solid rgba(255,255,255,.04)}.log-section-label{font-size:.75rem;letter-spacing:.35em;color:#ffffff80;padding-bottom:1.6rem}#log-binary-table{display:flex;flex-direction:column;gap:.5rem}.log-binary-entry{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:center;font-size:.875rem}.log-char{color:var(--dark-gray)}.log-nibble{color:#b4d2ffa6;letter-spacing:.125rem}.log-charname{color:var(--dark-gray);letter-spacing:.25rem}.log-lang-row{padding:1rem;border-bottom:1px solid rgba(255,255,255,.03);display:grid;grid-template-columns:1fr;align-items:start;opacity:0;transform:translate(8px);transition:opacity .3s,transform .3s}.log-lang-row.visible{opacity:1;transform:translate(0)}.log-lang-name{font-size:.625rem;letter-spacing:.2em}.log-lang-code{font-size:clamp(.75rem,1.1vw,.875rem);letter-spacing:.04em;color:#ffffff80;word-break:break-all;line-height:1.6}.log-empty{padding:2rem;font-size:1rem;color:#ffffff4d;text-align:center}#translation-bar{position:fixed;bottom:0;left:0;right:0;border-top:.063rem solid rgba(255,255,255,.05);padding:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:25;max-height:14vh}#trans-label{font-size:1rem;letter-spacing:.3rem;color:#fff3;flex-shrink:0}#trans-sequence{display:flex;flex-wrap:nowrap;gap:clamp(.25rem,1.2vw,.5rem)}.trans-byte{display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease;flex-shrink:0}.trans-byte.show{opacity:1;transform:translateY(0)}.trans-byte.fade{opacity:0;transform:translateY(-3px);transition:opacity .5s ease,transform .5s ease}.trans-nibble{font-size:1rem;color:var(--light-blue);font-family:var(--font-tech-mono)}.trans-char{font-size:clamp(.875rem,1vw,1.5rem);letter-spacing:.125em;color:var(--dark-gray);font-family:Share Tech Mono,monospace}#trans-cursor{font-size:1rem;color:var(--light-blue);animation:cur .8s step-end infinite;flex-shrink:0}@keyframes cur{0%,to{opacity:1}50%{opacity:0}}@media(max-width:480px){#trans-label{font-size:.5rem}}@media(max-width:1024px){#translation-bar{display:none}}