:root{--bg-color:#f4f4f0;--text-color:#000;--primary-color:#ffd000;--secondary-color:#ff90e8;--tertiary-color:#3b82f6;--danger-color:#f33;--nice-color:#00e676;--border-width:4px;--shadow-offset:8px;--space-xs:clamp(.5rem, 1.5vw, .75rem);--space-sm:clamp(.75rem, 2vw, 1.25rem);--space-md:clamp(1.25rem, 3vw, 1.75rem);--space-lg:clamp(1.75rem, 4vw, 2.5rem);--space-xl:clamp(2.5rem, 5vw, 3.5rem);--space-2xl:clamp(3.5rem, 6vw, 5rem)}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);justify-content:center;align-items:center;min-height:100vh;font-family:Space Grotesk,sans-serif;display:flex}.app-container{flex-direction:column;width:100%;max-width:900px;min-height:100vh;padding:clamp(1rem,4vw,2rem);display:flex}.header{margin-bottom:var(--space-lg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.logo{letter-spacing:-.05em;text-transform:uppercase;font-size:3rem;font-weight:700}.filters{justify-content:space-between;align-items:flex-start;gap:var(--space-lg);flex-wrap:wrap;width:100%;display:flex}.filter-group{align-items:flex-start;gap:var(--space-sm);flex-direction:column;display:flex}.checkbox-group{flex-wrap:wrap;gap:.5rem;display:flex}.checkbox-group input{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.checkbox-group label:has(input:focus-visible){outline:3px solid var(--text-color);outline-offset:2px}.checkbox-group label{color:#777;box-shadow:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#f8f8f8;border:2px dashed #999;align-items:center;padding:.35rem .75rem;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:flex;transform:translate(0)}.checkbox-group label:has(input:checked){background-color:var(--primary-color);color:var(--text-color);border:var(--border-width) solid var(--text-color);box-shadow:4px 4px 0px var(--text-color);transform:translate(-4px,-4px)}.filter-label{background-color:var(--text-color);color:var(--bg-color);text-transform:uppercase;padding:.25rem .5rem;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.brutalist-select{border:var(--border-width) solid var(--text-color);box-shadow:4px 4px 0px var(--text-color);cursor:pointer;text-transform:uppercase;background-color:#fff;outline:none;padding:.5rem 1rem;font-family:Space Grotesk,sans-serif;font-size:1rem;font-weight:700}.brutalist-select:focus{background-color:var(--primary-color)}.watermark{text-align:right;margin-top:2rem;display:none}.capturing .watermark{display:block}.watermark .logo{color:var(--secondary-color);text-shadow:2px 2px 0px var(--text-color);margin:0}.share-actions{justify-content:flex-end;display:flex}#btn-copy-image{border:2px solid var(--text-color);color:var(--text-color);cursor:pointer;box-shadow:2px 2px 0 var(--text-color);background:#fff;padding:.4rem .8rem;font-family:JetBrains Mono,monospace;font-size:.85rem;font-weight:700;transition:all .1s}#btn-copy-image:hover{background-color:var(--primary-color)}#btn-copy-image:active{box-shadow:0 0 0 var(--text-color);transform:translate(2px,2px)}.main-content{justify-content:center;align-items:stretch;gap:var(--space-lg);flex-direction:column;flex-grow:1;display:flex}.card-section{gap:var(--space-sm);flex-direction:column;align-items:stretch;display:flex}.controls-section{gap:var(--space-md);flex-direction:column;align-items:center;display:flex}.topic-card{border:var(--border-width) solid var(--text-color);box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--text-color);padding:var(--space-xl) clamp(1rem, 4vw, var(--space-lg));background:#fff;width:100%;transition:transform .15s cubic-bezier(.175,.885,.32,1.275)}.topic-card.glitch{opacity:.8;transform:scale(.98)skew(-2deg)}.tag-container{margin-bottom:var(--space-lg)}.tag{background-color:var(--secondary-color);border:2px solid var(--text-color);text-transform:uppercase;box-shadow:4px 4px 0px var(--text-color);padding:.5rem 1rem;font-family:JetBrains Mono,monospace;font-size:1rem;font-weight:700}.topic-text{font-size:2.5rem;font-weight:700;line-height:1.2}.btn{text-transform:uppercase;cursor:pointer;border:var(--border-width) solid var(--text-color);box-shadow:var(--shadow-offset) var(--shadow-offset) 0px var(--text-color);-webkit-user-select:none;user-select:none;padding:1rem 2.5rem;font-family:Space Grotesk,sans-serif;font-size:1.25rem;font-weight:700;transition:all .1s}.btn-primary{background-color:var(--primary-color)}.btn-nice{background-color:var(--nice-color)}.btn-violence{background-color:var(--danger-color)}.action-buttons{flex-wrap:wrap;justify-content:center;gap:1.5rem;display:flex}.mode-toggle{flex-wrap:wrap;justify-content:center;gap:clamp(.5rem,2vw,1.5rem);display:flex}.toggle-label{color:#777;box-shadow:none;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#f8f8f8;border:2px dashed #999;align-items:center;gap:.5rem;padding:clamp(.4rem,1.5vw,.5rem) clamp(.5rem,2vw,1rem);font-family:JetBrains Mono,monospace;font-size:clamp(.85rem,2vw,1.1rem);font-weight:700;transition:all .1s cubic-bezier(.175,.885,.32,1.275);display:flex;transform:translate(0)}.toggle-label input{clip:rect(0, 0, 0, 0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.toggle-label:has(input:focus-visible){outline:3px solid var(--text-color);outline-offset:2px}.toggle-label:has(input[value=nice]:checked){background-color:var(--nice-color);color:var(--text-color);border:var(--border-width) solid var(--text-color);box-shadow:6px 6px 0px var(--text-color);transform:translate(-6px,-6px)}.toggle-label:has(input[value=violence]:checked){background-color:var(--danger-color);color:#fff;border:var(--border-width) solid var(--text-color);box-shadow:6px 6px 0px var(--text-color);transform:translate(-6px,-6px)}.toggle-label:has(input:disabled){opacity:.4;cursor:not-allowed;pointer-events:none}.btn-secondary{box-shadow:4px 4px 0px var(--text-color);background-color:#fff;padding:.75rem 1.5rem;font-size:1rem}.btn:active{transform:translate(var(--shadow-offset), var(--shadow-offset));box-shadow:0px 0px 0px var(--text-color)}.btn-secondary:active{box-shadow:0px 0px 0px var(--text-color);transform:translate(4px,4px)}.footer{text-align:center;margin-top:4rem;padding-bottom:2rem;font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.modal{background:0 0;border:none;margin:auto;padding:0}.modal::backdrop{background:#000000b3}.modal-content{border:var(--border-width) solid var(--text-color);box-shadow:16px 16px 0px var(--text-color);background:#fff;width:90vw;max-width:500px;padding:2rem}.modal-content h3{text-transform:uppercase;margin-bottom:1.5rem;font-size:1.5rem}.input-group{flex-direction:column;gap:.5rem;margin-bottom:1.5rem;display:flex}.input-group label{font-family:JetBrains Mono,monospace;font-size:.9rem;font-weight:700}.input-group input,.input-group select,.input-group textarea{border:2px solid var(--text-color);background:var(--bg-color);outline:none;padding:.75rem;font-family:Space Grotesk,sans-serif;font-size:1rem}.input-group input:focus,.input-group select:focus,.input-group textarea:focus{border-color:var(--tertiary-color);background:#fff}.modal-actions{justify-content:flex-end;gap:1rem;display:flex}.callout{color:var(--text-color);background-color:var(--primary-color);border:2px solid var(--text-color);margin-top:.25rem;padding:.5rem;font-family:JetBrains Mono,monospace;font-size:.8rem;font-weight:700}
