html,body{overflow-x:hidden;margin:0;padding:0;background-color:#1a1a1a;color:#0c0}.title{text-align:center;margin-top:2rem;font-size:2rem;margin-bottom:0;font-family:sans-serif}.app{display:flex;justify-content:center;align-items:center;width:100%;flex:1;flex-direction:row;overflow:hidden;box-sizing:border-box;gap:3rem;padding:2rem}.pixel-5-7-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(7,1fr);border:2px solid #003300;padding:0}.pixel-8-8-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.pixel-10-10-grid{display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);max-width:100vw;box-sizing:border-box;border:1px solid #545454}.pixel-16-16-grid{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr)}.pixel{width:50px;height:50px;border:1px solid #00cc00;cursor:pointer}.pixel__on{background-color:#0c0}.pixel__off{background-color:#1a1a1a}.pixel-states{padding:1rem;font-family:monospace;word-wrap:break-word;overflow-wrap:break-word;max-width:100vw;box-sizing:border-box;overflow-x:auto}.pixel-binary-state{font-size:2rem;color:#060}.pixel-binary-state--bold{font-weight:700;color:#0c0}.ascii-output{display:flex;flex-direction:column;gap:1rem;font-family:Courier New,Courier,monospace;padding:1rem;border:2px solid #003300;min-width:200px}.ascii-title{font-size:1.5rem;font-weight:700;color:#0c0;border-bottom:1px solid #00cc00;padding-bottom:.5rem}.ascii-value{font-size:1.2rem;color:#0c0}.binary-title{font-size:1.5rem;font-weight:700;color:#0c0;border-bottom:1px solid #00cc00;padding-bottom:.5rem;margin-bottom:1rem}.pixel-states{padding:1rem;font-family:monospace;border:2px solid #003300;min-width:200px}.app-container{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;box-sizing:border-box}.character-bar{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;background-color:#1a1a1a;border-top:2px solid #003300}.character-button{padding:1rem 1.5rem;font-size:1.5rem;font-weight:700;font-family:Courier New,Courier,monospace;border:2px solid #006600;background-color:#1a1a1a;color:#0c0;cursor:pointer;border-radius:0;transition:background-color .2s;position:relative}.character-button:active{background-color:#0c0;color:#1a1a1a}.character-button--active{background-color:#0c0;color:#1a1a1a;border-color:#060}.app-nav{padding:1rem;border-bottom:1px solid #ccc;display:flex;gap:1rem;background-color:#f5f5f5}.app-nav button{padding:.5rem 1rem;background-color:#fff;color:#000;border:1px solid #ccc;border-radius:4px;cursor:pointer}.app-nav button.active{background-color:#007bff;color:#fff}.app-content{padding:0;background-color:#1a1a1a;width:100vw;height:100vh;overflow:hidden}