*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: hsl(202, 87%, 6%);--color-surface: hsl(208, 69%, 10%);--color-primary: hsl(220, 92%, 57%);--color-primary-hover: hsl(222, 89%, 61%);--color-accent: hsl(166, 68%, 61%);--color-text: #ffffff;--color-text-muted: hsl(210, 9%, 66%);--color-border: hsl(217, 42%, 19%);--radius: 16px;--radius-sm: 8px;--shadow: 0 8px 32px hsla(212, 68%, 56%, .1);--shadow-lg: 0 16px 48px hsla(212, 68%, 56%, .2);--transition: .2s ease}html{font-size:18px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;line-height:1.6}.app-container{max-width:600px;margin:0 auto;padding:3rem 1.5rem;min-height:100vh;display:flex;flex-direction:column;align-items:center}.prompt{font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:2.5rem;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.name-form{width:100%;display:flex;gap:1rem;margin-bottom:3rem}.typeahead-container{flex:1;position:relative}.typeahead-input{width:100%;padding:1.25rem 1.5rem;font-size:1.25rem;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}.typeahead-input::placeholder{color:var(--color-text-muted)}.typeahead-input:focus{border-color:var(--color-primary);box-shadow:var(--shadow)}.typeahead-options{display:none;position:absolute;top:calc(100% + .5rem);left:0;right:0;background:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius);overflow:hidden;z-index:100;box-shadow:var(--shadow-lg)}.typeahead-options.visible{display:block}.typeahead-option{padding:1.25rem 1.5rem;font-size:1.1rem;cursor:pointer;transition:background var(--transition),color var(--transition);border-bottom:1px solid var(--color-border)}.typeahead-option:last-child{border-bottom:none}.typeahead-option:hover{background:var(--color-primary);color:var(--color-text)}.typeahead-option:active{background:var(--color-primary-hover)}.submit-button{padding:1.25rem 1.5rem;font-size:1.5rem;background:var(--color-primary);border:none;border-radius:var(--radius);cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition)}.submit-button:hover{background:var(--color-primary-hover);transform:translateY(-2px);box-shadow:var(--shadow)}.submit-button:active{transform:translateY(0)}.name-info{width:100%}.name-info-container{background:var(--color-surface);border-radius:var(--radius);padding:2rem;margin-bottom:2.5rem;box-shadow:var(--shadow)}.name-title{font-size:2rem;font-weight:700;margin-bottom:1rem;color:var(--color-accent)}.name-short-form-of{font-size:1.1rem;color:var(--color-text-muted);margin-bottom:1.5rem}.name-inflections-by-preposition{display:flex;flex-wrap:wrap;gap:.75rem}.name-inflection{background:var(--color-bg);padding:.75rem 1.25rem;border-radius:var(--radius-sm);font-size:1rem;border:1px solid var(--color-border)}.link{color:var(--color-accent);text-decoration:none;transition:color var(--transition)}.link:hover{color:var(--color-primary-hover);text-decoration:underline}.spinner{width:40px;height:40px;position:relative;margin:0 auto}.spinner .double-bounce1,.spinner .double-bounce2{width:100%;height:100%;border-radius:50%;background-color:var(--color-primary);opacity:.6;position:absolute;top:0;left:0;animation:bounce 2s infinite ease-in-out}.spinner .double-bounce2{animation-delay:-1s}.loading-text{margin-top:1rem;text-align:center;color:var(--color-text-muted);font-size:1rem}@keyframes bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}table.name-inflections-by-case{width:100%;border-collapse:collapse}table.name-inflections-by-case td{border:1px solid var(--color-border);padding:.75rem 1rem;text-align:left}table.name-inflections-by-case .case-name{width:12ch;min-width:40%}table.name-inflections-by-case .case-english{font-size:.9rem;color:var(--color-text-muted)}table.name-inflections-by-case .inflected-form{font-weight:600}@media(max-width:600px){html{font-size:16px}.app-container{padding:2rem 1rem}.prompt{font-size:2rem;margin-bottom:2rem}.name-form{flex-direction:column}.submit-button{width:100%}.typeahead-input,.typeahead-option{padding:1rem 1.25rem}.name-info-container{padding:1.5rem;margin-bottom:2rem}.name-title{font-size:1.75rem}}.instructions{font-size:1.2rem;color:var(--color-text-muted);text-align:center;margin-top:2rem}.error-message{color:#e6bf4c;background:#43260a;padding:1rem 1.5rem;border-radius:var(--radius);margin-bottom:2rem;box-shadow:var(--shadow)}@media(pointer:coarse){.typeahead-option{padding:1.5rem;min-height:60px}.submit-button{min-height:60px}}