:root { --main-bg: #1a1c1f; --border-dark: #0e0e0e; --ui-bg: #2b2b2b; --ui-panel-bg: #3c3c3c; --text-light: #e0e0e0; --accent-yellow: #facc15; }
body { 
    font-family: 'Silkscreen', cursive; 
    color: var(--text-light); 
    background-color: var(--main-bg);
    background-image: radial-gradient(#3a3c3f 1px, transparent 1px);
    background-size: 4px 4px;
}
canvas { 
    image-rendering: -moz-crisp-edges; 
    image-rendering: -webkit-crisp-edges; 
    image-rendering: pixelated; 
    image-rendering: crisp-edges; 
}
.pixel-border { 
    border: 4px solid var(--border-dark); 
    box-shadow: 
        inset 0 0 0 2px #5a5a5a, 
        inset 0 0 0 4px var(--text-light), 
        inset 0 0 0 6px #5a5a5a, 
        inset 0 0 0 8px var(--border-dark); 
    background-color: var(--ui-bg); 
}
.pixel-button { 
    background-color: #5a5a5a; 
    border: none; 
    color: var(--text-light); 
    padding: 8px 10px;
    font-size: 13px;
    margin: 2px; 
    cursor: pointer; 
    position: relative; 
    box-shadow: inset -2px -2px 0px 0px #3c3c3c, inset 2px 2px 0px 0px #ffffff; 
    transition: transform 0.1s, box-shadow 0.1s; 
}
.pixel-button:hover { background-color: #6a6a6a; }
.pixel-button:active, .pixel-button.active-preset { 
    transform: translateY(2px); 
    box-shadow: inset -1px -1px 0px 0px #3c3c3c, inset 1px 1px 0px 0px #ffffff; 
    background-color: #4CAF50; 
    color: white; 
}
.pixel-button-primary { background-color: #2a75d2; box-shadow: inset -2px -2px 0px 0px #1a4a83, inset 2px 2px 0px 0px #6eb1ff; }
.pixel-button-primary:hover { background-color: #3a85e2; }
.pixel-button-danger { background-color: #d22a2a; box-shadow: inset -2px -2px 0px 0px #831a1a, inset 2px 2px 0px 0px #ff6e6e; }
.pixel-button-danger:hover { background-color: #e23a3a; }
.pixel-select { 
    background-color: #5a5a5a; border: 2px solid #000; color: var(--text-light); padding: 8px; 
    box-shadow: inset -2px -2px 0px 0px #3c3c3c, inset 2px 2px 0px 0px #ffffff; 
    -webkit-appearance: none; -moz-appearance: none; appearance: none; 
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e0e0e0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); 
    background-repeat: no-repeat; background-position: right .7em top 50%; background-size: .65em auto; 
}
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; }
input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; height: 24px; width: 14px; background: var(--text-light); cursor: pointer; margin-top: -10px; 
    border: 2px solid #000; box-shadow: inset -1px -1px 0px 0px #3c3c3c, inset 1px 1px 0px 0px #ffffff; 
}
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 6px; cursor: pointer; background: #5a5a5a; border: 2px solid #000; }
details { border: 4px solid #000; background-color: var(--ui-panel-bg); margin-top: 1rem; box-shadow: inset 0 0 0 2px #5a5a5a; }
details > summary { 
    cursor: pointer; padding: 10px 12px; background-color: #4a4a4a; list-style: none; display: flex;
    align-items: center; justify-content: space-between; box-shadow: inset -2px -2px 0px 0px #222, inset 2px 2px 0px 0px #666; 
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; font-size: 1.5em; color: var(--accent-yellow); transition: transform 0.2s; }
details[open] > summary { background-color: #555; }
details[open] > summary::after { content: '-'; transform: rotate(180deg); }
.details-content { padding: 0.5rem; border-top: 4px solid #000; }
.control-grid { display: grid; grid-template-columns: 100px 1fr 50px; align-items: center; gap: 10px; margin-bottom: 8px; }
.control-grid label { grid-column: 1 / 2; text-align: right; font-size: 14px; }
.control-grid input, .control-grid select { grid-column: 2 / 3; width: 100%; }
.control-grid span { grid-column: 3 / 4; font-size: 14px; color: var(--accent-yellow); }
#comparison-container { position: relative; overflow: hidden; transition: transform 0.2s; transform-origin: center center;}
#original-canvas, #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
#slider-handle { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 4px; background-color: rgba(255, 0, 128, 0.8); cursor: ew-resize; z-index: 10; }
#slider-handle::after { content: '◆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: rgba(255, 0, 128, 0.8); font-size: 24px; text-shadow: 0 0 4px black; }
.main-header { background-color: var(--ui-bg); padding: 0.5rem 1rem; }
.footer { background-color: var(--ui-bg); padding: 2rem 1rem; margin-top: 2rem; }
.blog-post-card { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.blog-post-card:hover { transform: scale(1.03) rotate(-1deg); box-shadow: 8px 8px 0px #0e0e0e; }