:root{--color-primary-purple:#667eea;--color-secondary-purple:#764ba2;--color-purple-gradient:linear-gradient(135deg,#667eea,#764ba2);--color-white:#fff;--color-bg-light-gray:#f8f9fa;--color-bg-lighter-gray:#f0f0f0;--color-text-primary:#333;--color-text-secondary:#666;--color-text-tertiary:#999;--color-text-label:#444;--color-border-light:#e0e0e0;--color-border-medium:#ddd;--color-button-primary:#4338ca;--color-button-primary-hover:#3730a3;--color-button-text:#fff;--color-focus-border:#4338ca;--color-navbar-bg:hsla(0,0%,100%,.08);--color-navbar-link:hsla(0,0%,100%,.75);--color-navbar-link-hover-bg:hsla(0,0%,100%,.1);--color-navbar-link-active-bg:hsla(0,0%,100%,.18);--color-error-text:#c33;--color-error-bg:#fee;--color-error-border:#e53e3e;--color-success-bg:#e8f5e9;--color-success-border:#4caf50;--color-success-text:#2e7d32;--color-warning-bg:#fff3e0;--color-warning-text:#e65100;--color-review-correct-bg:#f1f8e9;--color-review-incorrect-bg:#fce4ec;--color-loading:#667eea;--font-family-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-size-mega:8rem;--font-size-mega-mobile:6rem;--font-size-giant:4rem;--font-size-huge:3.5rem;--font-size-xl:3rem;--font-size-xl-minus:2.5rem;--font-size-large:2rem;--font-size-medium-large:1.5rem;--font-size-medium-plus:1.2rem;--font-size-medium:1.1rem;--font-size-base:1rem;--font-size-small:.95rem;--font-size-xs:.9rem;--font-size-tiny:.85rem;--font-size-micro:.8rem;--font-size-nano:.75rem;--font-weight-bold:600;--font-weight-medium:500;--font-weight-normal:400;--line-height-tight:1;--line-height-base:1.4;--line-height-relaxed:1.6;--spacing-micro:3px;--spacing-mini:4px;--spacing-tiny:6px;--spacing-xxs:8px;--spacing-xs:10px;--spacing-s:12px;--spacing-base:15px;--spacing-m:18px;--spacing-l:20px;--spacing-xl:30px;--spacing-xxl:40px;--radius-pill:20px;--radius-large:16px;--radius-medium-plus:15px;--radius-medium:12px;--radius-small:8px;--radius-xs:6px;--radius-circle:50%;--shadow-dramatic:0 20px 60px rgba(0,0,0,.3);--shadow-large:0 10px 30px rgba(0,0,0,.2);--shadow-medium:0 5px 15px rgba(0,0,0,.1);--shadow-small:0 4px 15px rgba(0,0,0,.1);--shadow-hover-card:0 10px 25px rgba(0,0,0,.15);--shadow-hover-button:0 5px 15px rgba(67,56,202,.4);--shadow-hover-button-small:0 4px 8px rgba(67,56,202,.3);--shadow-hover-small:0 2px 8px rgba(67,56,202,.3);--shadow-focus-ring:0 0 0 3px rgba(67,56,202,.1);--transition-fast:.2s;--transition-medium:.3s;--transition-transform:transform .2s;--transition-shadow:box-shadow .2s;--transition-all:all .2s;--transition-border:border-color .3s;--transition-background:background .2s;--transition-color:color .2s;--transition-lift:transform .2s,box-shadow .2s;--transition-button:transform .2s,box-shadow .2s,background .2s;--container-max-width:1200px;--modal-max-width:900px;--modal-max-height:90vh;--modal-overlay-bg:rgba(0,0,0,.5);--z-index-navbar:900;--z-index-modal:1000;--gap-major:20px;--gap-minor:15px;--gap-inline:10px;--gap-tiny:6px;--gap-xxs:8px;--text-shadow-header:2px 2px 4px rgba(0,0,0,.2);--letter-spacing-label:1px;--letter-spacing-brand:.5px;--opacity-disabled:.3;--opacity-subtitle:.9;--size-close-button:40px;--size-radio-checkbox:18px;--min-width-pagination-btn:45px;--max-width-reading-group:240px}.navbar[data-v-39163c66]{background:var(--color-navbar-bg);border-radius:var(--radius-medium-plus);margin-bottom:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-l)}.navbar-inner[data-v-39163c66]{justify-content:space-between;margin:0 auto;max-width:var(--container-max-width);padding:var(--spacing-s) 0}.navbar-brand[data-v-39163c66],.navbar-inner[data-v-39163c66]{align-items:center;display:flex}.navbar-brand[data-v-39163c66]{color:var(--color-white);gap:var(--spacing-xxs);text-decoration:none;transition:var(--transition-all)}.navbar-brand[data-v-39163c66]:hover{opacity:.85}.navbar-brand-kanji[data-v-39163c66]{font-size:var(--font-size-medium-large);line-height:var(--line-height-tight)}.navbar-brand-text[data-v-39163c66]{font-size:var(--font-size-medium);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-brand)}.navbar-links[data-v-39163c66]{align-items:center;display:flex;gap:var(--spacing-mini)}.navbar-link[data-v-39163c66]{border-radius:var(--radius-xs);color:var(--color-navbar-link);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);padding:var(--spacing-tiny) var(--spacing-s);text-decoration:none;transition:var(--transition-all)}.navbar-link[data-v-39163c66]:hover{background:var(--color-navbar-link-hover-bg);color:var(--color-white)}.navbar-link.active[data-v-39163c66]{background:var(--color-navbar-link-active-bg);color:var(--color-white)}@media(max-width:480px){.navbar-brand-text[data-v-39163c66]{font-size:var(--font-size-xs)}.navbar-link[data-v-39163c66]{font-size:var(--font-size-tiny);padding:var(--spacing-tiny) var(--spacing-xxs)}}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--color-purple-gradient);font-family:var(--font-family-base);min-height:100vh;padding:var(--spacing-l)}.app-container{margin:0 auto;max-width:var(--container-max-width)}header{color:var(--color-white);margin-bottom:var(--spacing-xxl);padding:var(--spacing-l);text-align:center}header h1{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs);text-shadow:var(--text-shadow-header)}.subtitle{font-size:var(--font-size-medium-plus);opacity:var(--opacity-subtitle)}.search-section{background:var(--color-white);border-radius:var(--radius-medium-plus);box-shadow:var(--shadow-large);margin-bottom:var(--spacing-xl);padding:var(--spacing-xl)}.error,.loading{border-radius:var(--radius-small);margin:var(--spacing-l) 0;padding:var(--spacing-l);text-align:center}.loading{background:var(--color-white);color:var(--color-loading);font-size:var(--font-size-medium-plus)}.error{background:var(--color-error-bg);border:1px solid var(--color-error-text);color:var(--color-error-text)}.results{display:grid;gap:var(--gap-major);grid-template-columns:repeat(4,1fr)}@media(max-width:1024px){.results{grid-template-columns:repeat(3,1fr)}}@media(max-width:768px){header h1{font-size:var(--font-size-large)}.results{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.results{grid-template-columns:1fr}}