:root{color-scheme:light;--bg: #f3ede1;--surface-1: #fbf8f1;--surface-2: #e7ded0;--ink: #241f18;--ink-muted: #6b6154;--accent-add: #b3541e;--accent-remove: #4d5b6b;--accent-action: #8a1c1c;--success: #3f6b3f;--danger: #8a1c1c;--font-display: "Fraunces", Georgia, "Times New Roman", serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;--space-1: 8px;--space-2: 16px;--space-3: 24px;--space-4: 32px;--space-6: 48px;--space-8: 64px;--radius: 6px;--shadow-card: 0 4px 16px rgba(36, 31, 24, .12);--motion-ui: .18s ease-out}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-mono)}.page{max-width:1440px;margin:0 auto;padding:var(--space-4) var(--space-4) var(--space-8)}.hero-head{text-align:center;margin-bottom:var(--space-4)}.wordmark{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.01em;margin:0 0 var(--space-1);color:var(--ink)}.wordmark-accent{color:var(--accent-action)}.tagline{margin:0;color:var(--ink-muted);font-size:1rem;max-width:60ch;margin-inline:auto}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);align-items:start}.inputs,.output{display:flex;flex-direction:column;gap:var(--space-2)}.pane{display:flex;flex-direction:column;gap:var(--space-1)}.pane-label{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}.editor{display:flex;height:45vh;min-height:220px;background:var(--surface-1);border:1px solid var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden}.gutter{flex:0 0 auto;width:40px;padding:var(--space-2) 0;text-align:right;color:var(--ink-muted);background:var(--surface-2);font-size:.85rem;line-height:1.6;white-space:pre;overflow:hidden;-webkit-user-select:none;user-select:none;padding-right:var(--space-1)}.pane-input{flex:1 1 auto;resize:none;border:none;outline:none;background:transparent;color:var(--ink);font-family:var(--font-mono);font-size:.95rem;line-height:1.6;padding:var(--space-2);transition:background var(--motion-ui)}.pane-input::placeholder{color:var(--ink-muted)}.pane-input:hover{background:#241f1805}.pane-input:focus-visible{background:var(--surface-1);box-shadow:inset 0 0 0 2px var(--accent-action)}.editor:focus-within{border-color:var(--accent-action)}.controls-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2)}.language-field{display:flex;flex-direction:column;gap:var(--space-1)}.language-label{font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}.language-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;min-height:44px;min-width:160px;padding:var(--space-1) var(--space-4) var(--space-1) var(--space-2);border:1px solid var(--surface-2);border-radius:var(--radius);background-color:var(--surface-1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b6154' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;color:var(--ink);font-family:var(--font-mono);font-size:.9rem;cursor:pointer;transition:border-color var(--motion-ui),background var(--motion-ui)}.language-select:hover{border-color:var(--accent-action)}.language-select:focus-visible{outline:2px solid var(--accent-action);outline-offset:2px}.generate-btn{min-height:44px;padding:var(--space-1) var(--space-3);border:none;border-radius:var(--radius);background:var(--accent-action);color:var(--surface-1);font-family:var(--font-mono);font-weight:600;font-size:.95rem;cursor:pointer;box-shadow:var(--shadow-card);transition:transform var(--motion-ui),background var(--motion-ui),box-shadow var(--motion-ui)}.generate-btn:hover{background:#a52424;box-shadow:0 6px 20px #241f182e}.generate-btn:active{transform:translateY(1px) scale(.99)}.generate-btn:focus-visible{outline:2px solid var(--accent-action);outline-offset:3px}.generate-btn:disabled{background:var(--surface-2);color:var(--ink-muted);cursor:not-allowed;box-shadow:none}.privacy-note{margin:0;color:var(--ink-muted);font-size:.85rem}.output-card{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;background:var(--surface-1);border:1px solid var(--surface-2);border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;padding:var(--space-3)}.output-empty,.output-error{margin:0;text-align:center;color:var(--ink-muted);font-size:.95rem;max-width:40ch}.output-error{color:var(--danger)}.output-canvas{width:100%;height:auto;border-radius:var(--radius)}.output-card[data-state=success] .output-canvas{animation:ink-blot .4s ease-out}@keyframes ink-blot{0%{clip-path:circle(0% at var(--reveal-x, 50%) var(--reveal-y, 50%))}to{clip-path:circle(140% at var(--reveal-x, 50%) var(--reveal-y, 50%))}}.output-actions{display:flex;gap:var(--space-2)}.output-actions[hidden]{display:none}.action-btn{flex:1 1 0;min-height:44px;padding:var(--space-1) var(--space-2);border:1px solid var(--surface-2);border-radius:var(--radius);background:var(--surface-1);color:var(--ink);font-family:var(--font-mono);font-weight:600;font-size:.9rem;cursor:pointer;transition:transform var(--motion-ui),background var(--motion-ui),border-color var(--motion-ui)}.action-btn:hover{background:var(--surface-2);border-color:var(--accent-action)}.action-btn:active{transform:translateY(1px) scale(.99)}.action-btn:focus-visible{outline:2px solid var(--accent-action);outline-offset:3px}.action-btn:disabled{color:var(--ink-muted);cursor:not-allowed;background:var(--surface-1);border-color:var(--surface-2)}.output-status{min-height:1.2em;margin:0;color:var(--success);font-size:.85rem;text-align:center}.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-6);margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--surface-2)}.about-col{max-width:60ch}.about-heading{font-family:var(--font-display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:var(--space-3) 0 var(--space-1)}.about-col>.about-heading:first-child{margin-top:0}.about p{margin:0 0 var(--space-2);color:var(--ink-muted);font-size:.95rem;line-height:1.7}.about code{font-family:var(--font-mono);font-size:.85em;color:var(--ink);background:var(--surface-2);padding:1px 5px;border-radius:4px}.about-steps{margin:0;padding-left:1.4em;color:var(--ink-muted);font-size:.95rem;line-height:1.7}.about-steps li{margin-bottom:var(--space-1)}.faq{margin:0}.faq dt{font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--ink);margin-top:var(--space-2)}.faq dd{margin:var(--space-1) 0 var(--space-2);color:var(--ink-muted);font-size:.9rem;line-height:1.65}.site-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-6);padding-top:var(--space-3);border-top:1px solid var(--surface-2)}.footer-cta{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-1) var(--space-3);border-radius:var(--radius);background:var(--accent-action);color:var(--surface-1);font-family:var(--font-display);font-weight:600;font-size:.95rem;text-decoration:none;box-shadow:var(--shadow-card);transition:transform var(--motion-ui),background var(--motion-ui),box-shadow var(--motion-ui)}.footer-cta:hover{background:#a52424;box-shadow:0 6px 20px #241f182e}.footer-cta:active{transform:translateY(1px) scale(.99)}.footer-cta:focus-visible{outline:2px solid var(--accent-action);outline-offset:3px}.footer-portfolio{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-muted);font-size:.85rem;text-decoration:none;border-bottom:1px solid transparent;transition:color var(--motion-ui),border-color var(--motion-ui)}.footer-portfolio:hover{color:var(--accent-action);border-bottom-color:var(--accent-action)}.footer-portfolio:focus-visible{outline:2px solid var(--accent-action);outline-offset:3px}@media (max-width: 900px){.layout{grid-template-columns:1fr}.about{grid-template-columns:1fr;gap:var(--space-4)}.editor{height:32vh}.output-card{min-height:40vh}}@media (max-width: 480px){.page{padding:var(--space-3) var(--space-2) var(--space-6)}.editor{height:18vh;min-height:150px}.output-card{min-height:32vh}.output-actions{flex-direction:column}.controls-row{flex-direction:column;align-items:stretch}.language-select{width:100%}}@media (prefers-reduced-motion: reduce){.output-card[data-state=success] .output-canvas{animation:none}.generate-btn,.action-btn,.pane-input{transition:none}}