:root{font-family:Space Grotesk,system-ui,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--nb-bg, #f5f0e8)}#root{min-height:100vh}button{font-family:inherit;cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--nb-black, #1a1a1a);outline-offset:2px}:root{--nb-bg: #f5f0e8;--nb-surface: #fffef9;--nb-black: #1a1a1a;--nb-border: 3px solid #1a1a1a;--nb-shadow: 5px 5px 0 #1a1a1a;--nb-shadow-sm: 3px 3px 0 #1a1a1a;--nb-accent: #c8ff00;--nb-accent-hover: #b5e600;--nb-error: #ff3b3b;--nb-error-bg: #ffe5e5;--font-sans: "Space Grotesk", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace}.app{min-height:100vh;background:var(--nb-bg);color:var(--nb-black);font-family:var(--font-sans);display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem 4rem;position:relative}.app:before{content:"";position:fixed;inset:0;background-image:linear-gradient(to right,rgba(26,26,26,.03) 1px,transparent 1px),linear-gradient(to bottom,rgba(26,26,26,.03) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;z-index:0}.app>*{position:relative;z-index:1}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:clamp(2rem,5vw,3rem);font-weight:700;letter-spacing:-.03em;margin:0 0 .5rem;text-transform:uppercase;line-height:1.1;position:relative;display:inline-block}.header h1:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:4px;background:var(--nb-accent);border:2px solid var(--nb-black);border-radius:2px}.tagline{font-size:1rem;font-weight:500;color:var(--nb-black);opacity:.85;margin:0}.main{width:100%;max-width:680px;display:flex;flex-direction:column;gap:1.75rem}.card{background:var(--nb-surface);border:var(--nb-border);border-radius:4px;padding:1.75rem;box-shadow:var(--nb-shadow);transition:box-shadow .15s ease,transform .15s ease}.card:hover{box-shadow:7px 7px 0 var(--nb-black)}.card h2{font-size:1.1rem;font-weight:700;margin:0 0 1.25rem;text-transform:uppercase;letter-spacing:.02em}.form label{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.1rem}.form label:last-of-type{margin-bottom:0}.form label span{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--nb-black)}.form input,.form select,.form textarea{width:100%;padding:.7rem .9rem;border:var(--nb-border);border-radius:4px;background:var(--nb-bg);color:var(--nb-black);font-family:inherit;font-size:.95rem;font-weight:500;transition:box-shadow .15s ease,transform .15s ease}.form input:hover,.form select:hover,.form textarea:hover{box-shadow:var(--nb-shadow-sm)}.form input:focus,.form select:focus,.form textarea:focus{outline:none;box-shadow:0 0 0 3px var(--nb-accent)}.form input::placeholder,.form textarea::placeholder{color:var(--nb-black);opacity:.45}.form textarea{resize:vertical;min-height:88px}.form select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a1a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2rem}.api-key-label small{font-size:.75rem;font-weight:500;color:var(--nb-black);opacity:.7;margin-top:.2rem;text-transform:none;letter-spacing:0}.modal-backdrop{position:fixed;inset:0;background:#1a1a1a99;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:nbFadeIn .2s ease}@keyframes nbFadeIn{0%{opacity:0}to{opacity:1}}.modal-backdrop .modal{position:relative;max-width:90vw;max-height:90vh;overflow:auto;animation:nbModalPop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes nbModalPop{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal .modal-title{margin-bottom:1rem}.modal-loading{padding:3rem 2rem;text-align:center;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.modal-loading .btn-text{animation:nbBlink 1s ease-in-out infinite}.modal-diagram{margin-bottom:1.25rem;position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;background:var(--nb-bg);border:var(--nb-border);border-radius:4px;box-shadow:var(--nb-shadow-sm)}.modal-diagram-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.modal-diagram-spinner{width:40px;height:40px;border:3px solid var(--nb-black);border-top-color:var(--nb-accent);border-radius:50%;animation:nbSpin .8s linear infinite}@keyframes nbSpin{to{transform:rotate(360deg)}}.modal-diagram-loading-text{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.modal-diagram .diagram-img{width:100%;max-height:60vh;object-fit:contain;opacity:0;transition:opacity .25s ease}.modal-diagram .diagram-img.diagram-img-visible{opacity:1}.modal-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.modal-actions-save{margin-top:.5rem}.modal-error{width:100%;padding:.65rem .9rem;background:var(--nb-error-bg);border:var(--nb-border);border-radius:4px;color:var(--nb-error);font-size:.85rem;font-weight:600;margin-bottom:.25rem}.modal-actions .btn-like,.modal-actions .btn-regenerate,.modal-actions .btn-loop,.modal-actions .btn-save{padding:.7rem 1.25rem;border-radius:4px;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.04em;border:var(--nb-border);transition:transform .1s ease,box-shadow .1s ease;cursor:pointer;font-family:inherit}.modal-actions .btn-like{background:var(--nb-accent);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}.modal-actions .btn-like:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.modal-actions .btn-regenerate{background:var(--nb-surface);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}.modal-actions .btn-regenerate:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.modal-actions .btn-regenerate:disabled{opacity:.7;cursor:not-allowed}.modal-actions .btn-loop{background:var(--nb-bg);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}.modal-actions .btn-loop:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.modal-actions .btn-save{background:var(--nb-accent);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}.modal-actions .btn-save:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.modal-close{position:absolute;top:1rem;right:1rem;width:2.25rem;height:2.25rem;padding:0;border:var(--nb-border);border-radius:4px;background:var(--nb-surface);font-size:1.5rem;line-height:1;cursor:pointer;font-family:inherit;font-weight:700;box-shadow:var(--nb-shadow-sm);transition:transform .1s ease,box-shadow .1s ease}.modal-close:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.modal-close:disabled{opacity:.6;cursor:not-allowed}.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.form button[type=submit],.form button.secondary{padding:.75rem 1.5rem;border-radius:4px;font-weight:700;font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;border:var(--nb-border);transition:transform .1s ease,box-shadow .1s ease}.form button[type=submit]{background:var(--nb-accent);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}.form button[type=submit]:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.form button[type=submit]:active:not(:disabled){transform:translate(4px,4px);box-shadow:none}.form button[type=submit]:disabled{opacity:.85;cursor:not-allowed;transform:none}.form button[type=submit].is-loading .btn-text{display:inline-block;animation:nbBlink 1s ease-in-out infinite}@keyframes nbBlink{50%{opacity:.6}}.form button.secondary{background:var(--nb-surface);color:var(--nb-black);box-shadow:var(--nb-shadow-sm)}.form button.secondary:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--nb-black)}.form button.secondary:active{transform:translate(4px,4px);box-shadow:none}.error-box{margin-top:1rem;padding:.9rem 1rem;background:var(--nb-error-bg);border:var(--nb-border);border-radius:4px;color:var(--nb-error);font-size:.9rem;font-weight:600;box-shadow:var(--nb-shadow-sm)}.result{animation:nbPop .35s cubic-bezier(.34,1.56,.64,1)}@keyframes nbPop{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.result h3{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--nb-black);margin:0 0 .5rem}.code-block{margin-bottom:1.5rem}.code-block pre{margin:0;padding:1rem;background:var(--nb-black);color:var(--nb-accent);border:var(--nb-border);border-radius:4px;overflow-x:auto;font-family:var(--font-mono);font-size:.78rem;line-height:1.5;box-shadow:var(--nb-shadow-sm)}.code-block code{white-space:pre}.diagram-block{margin-top:1rem}.diagram-img{max-width:100%;height:auto;border:var(--nb-border);border-radius:4px;background:#fff;display:block;box-shadow:var(--nb-shadow-sm)}.footer{margin-top:auto;padding-top:2rem;text-align:center;font-size:.8rem;font-weight:500;color:var(--nb-black);opacity:.8;line-height:1.65}.footer strong{font-weight:700}@media(prefers-reduced-motion:reduce){.card,.form input,.form select,.form textarea,.form button[type=submit],.form button.secondary{transition:none}.form button[type=submit]:hover:not(:disabled),.form button.secondary:hover{transform:none}.result{animation:none}.modal-diagram-spinner{animation:none;border-top-color:var(--nb-accent)}.modal-diagram .diagram-img{transition:none}}