*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--black: #000000;--white: #ffffff;--gray-light: #e0e0e0;--gray-mid: #808080;--gray-dark: #404040;--grid: 8px;--dither-light: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");--dither-medium: url("data:image/svg+xml,%3Csvg width='4' height='4' viewBox='0 0 4 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");--grid-pattern: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 0v32H0' fill='none' stroke='%23e0e0e0' stroke-width='1'/%3E%3C/svg%3E")}html{font-size:16px}body{font-family:Silkscreen,monospace;background-color:var(--white);background-image:var(--grid-pattern);color:var(--black);line-height:1.6;min-height:100vh;padding:calc(var(--grid) * 2);padding-bottom:calc(var(--grid) * 6)}#app{max-width:1400px;margin:0 auto}h1,h2,h3{font-weight:400;text-transform:uppercase;letter-spacing:.05em}h1{font-size:1.5rem;border-bottom:2px solid var(--black);padding-bottom:var(--grid);margin-bottom:calc(var(--grid) * 2)}h2{font-size:.75rem;background:var(--black);color:var(--white);padding:calc(var(--grid) * .5) var(--grid);margin-bottom:var(--grid);display:inline-block}p{margin-bottom:var(--grid);font-size:.75rem}.masonry{column-count:3;column-gap:calc(var(--grid) * 2)}@media(max-width:1000px){.masonry{column-count:2}}@media(max-width:600px){.masonry{column-count:1}}section{break-inside:avoid;border:2px solid var(--black);padding:calc(var(--grid) * 2);margin-bottom:calc(var(--grid) * 2);background:var(--white)}header{text-align:center;margin-bottom:calc(var(--grid) * 3);padding:calc(var(--grid) * 3);border:2px solid var(--black);background:var(--white)}label{display:flex;align-items:center;gap:var(--grid);padding:calc(var(--grid) * .5);cursor:pointer;font-size:.75rem}label:hover{background:var(--gray-light)}input[type=radio],input[type=checkbox]{appearance:none;width:calc(var(--grid) * 1.5);height:calc(var(--grid) * 1.5);border:2px solid var(--black);background:var(--white);cursor:pointer;flex-shrink:0}input[type=radio]:checked,input[type=checkbox]:checked{background:var(--black)}textarea{width:100%;padding:var(--grid);border:2px solid var(--black);font-family:inherit;font-size:.75rem;resize:vertical;background:var(--white);color:var(--black)}textarea:focus{outline:none;box-shadow:4px 4px 0 var(--black)}button{background:var(--black);color:var(--white);border:none;padding:var(--grid) calc(var(--grid) * 2);font-family:inherit;font-size:.75rem;text-transform:uppercase;cursor:pointer}button:hover{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 2px var(--black)}button:disabled{background:var(--gray-mid);cursor:not-allowed}.preview-box{border:2px solid var(--black);padding:var(--grid);min-height:calc(var(--grid) * 8);font-family:Arial,sans-serif;font-size:.875rem;background:var(--white);position:relative}.preview-box:before{content:"APERCU";position:absolute;top:0;right:0;background:var(--black);color:var(--white);font-size:.5rem;font-family:Silkscreen,monospace;padding:2px 4px}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--grid) * .5)}.options-grid-4{grid-template-columns:repeat(4,1fr)}@media(max-width:600px){.options-grid-4{grid-template-columns:repeat(2,1fr)}}.option-card{border:2px solid var(--black);padding:var(--grid);cursor:pointer;text-align:center;font-size:.625rem}.option-card:hover{background:var(--gray-light)}.option-card.selected{background:var(--black);color:var(--white)}.option-card .symbol{font-size:1.25rem;display:block;margin-bottom:4px;font-family:Arial,sans-serif}.steps{display:flex;gap:var(--grid)}.step{flex:1;text-align:center;opacity:.3;transform:scale(.95)}.step-number{display:block;width:calc(var(--grid) * 3);height:calc(var(--grid) * 3);line-height:calc(var(--grid) * 3);background:var(--black);color:var(--white);font-size:.875rem;margin:0 auto var(--grid)}.step-text{font-size:.625rem}.level-bar{display:flex;gap:2px;margin-top:var(--grid)}.level-bar span{flex:1;height:4px;background:var(--gray-light)}.level-bar.light span:nth-child(1){background:var(--black)}.level-bar.moderate span:nth-child(-n+2){background:var(--black)}.level-bar.severe span:nth-child(-n+3){background:var(--black)}.level-bar.critical span{background:var(--black)}.warning{border:2px dashed var(--black);background:var(--white)}.warning-title{font-size:.75rem;margin-bottom:var(--grid)}.font-name{font-family:monospace;background:var(--black);color:var(--white);padding:4px 8px;display:inline-block;font-size:.75rem}.pixel-corner{position:relative}.pixel-corner .corner{position:absolute;width:8px;height:8px;background:var(--black);transition:none}.pixel-corner .corner-1{top:-4px;left:-4px}.pixel-corner .corner-2{bottom:-4px;right:-4px}footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:calc(var(--grid) * 1.5);border-top:2px solid var(--black);font-size:.625rem;background:var(--white);z-index:100}footer a{color:var(--black);text-decoration:underline}footer a:hover{background:var(--black);color:var(--white)}.text-center{text-align:center}.text-small{font-size:.625rem}.mt-1{margin-top:var(--grid)}.mt-2{margin-top:calc(var(--grid) * 2)}.mb-1{margin-bottom:var(--grid)}.mb-2{margin-bottom:calc(var(--grid) * 2)}.full-width{width:100%}ol,ul{margin-left:calc(var(--grid) * 2);font-size:.625rem}ol li,ul li{margin-bottom:4px}.dark-toggle{position:fixed;top:calc(var(--grid) * 2);right:calc(var(--grid) * 2);z-index:101;background:var(--black);color:var(--white);border:2px solid var(--black);padding:calc(var(--grid) * .5) var(--grid);font-family:inherit;font-size:.625rem}.dark-toggle:hover{background:var(--white);color:var(--black)}.dark{--black: #ffffff;--white: #000000;--gray-light: #333333;--gray-mid: #808080;--gray-dark: #c0c0c0}.dark body{background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 0v32H0' fill='none' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E")}