*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep: #1a1a2e;--bg-mid: #16213e;--accent-gold: #c9a96e;--accent-gold-light: #e8c78a;--text-washi: #e8d5b7;--text-muted: #a09070;--card-bg: rgba(255, 255, 255, .05);--card-border: rgba(201, 169, 110, .2);--font-serif: "Noto Serif JP", serif;--font-sans: "Noto Sans JP", sans-serif}body{font-family:var(--font-sans);background:linear-gradient(135deg,var(--bg-deep) 0%,var(--bg-mid) 100%);color:var(--text-washi);min-height:100vh;background-attachment:fixed}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' fill='none' stroke='rgba(201,169,110,0.04)' stroke-width='1'/%3E%3Cpath d='M30 10 L50 30 L30 50 L10 30 Z' fill='none' stroke='rgba(201,169,110,0.03)' stroke-width='1'/%3E%3C/svg%3E");pointer-events:none;z-index:0}#root{position:relative;z-index:1}.app{max-width:900px;margin:0 auto;padding:2rem 1rem 4rem}.app-header{text-align:center;margin-bottom:3rem}.app-header h1{font-family:var(--font-serif);font-size:clamp(1.8rem,5vw,2.8rem);color:var(--accent-gold);letter-spacing:.2em;text-shadow:0 0 30px rgba(201,169,110,.3);margin-bottom:.5rem}.app-header p{color:var(--text-muted);font-size:.9rem;letter-spacing:.05em}.name-input-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:2rem;margin-bottom:2.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.name-input-section h2{font-family:var(--font-serif);font-size:1.1rem;color:var(--accent-gold);margin-bottom:1.5rem;letter-spacing:.1em;text-align:center}.input-row{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.input-group{flex:1;min-width:150px}.input-group label{display:block;font-size:.85rem;color:var(--text-muted);margin-bottom:.5rem;letter-spacing:.1em}.input-group input{width:100%;background:#ffffff12;border:1px solid rgba(201,169,110,.3);border-radius:8px;padding:.75rem 1rem;color:var(--text-washi);font-family:var(--font-sans);font-size:1.2rem;letter-spacing:.15em;outline:none;transition:border-color .2s,box-shadow .2s}.input-group input:focus{border-color:var(--accent-gold);box-shadow:0 0 0 2px #c9a96e26}.input-group input::placeholder{color:#fff3;font-size:.95rem}.diagnose-btn{display:block;width:100%;padding:.9rem;background:linear-gradient(135deg,#c9a96e,#a07840);color:#1a1a2e;font-family:var(--font-serif);font-size:1.1rem;font-weight:700;letter-spacing:.2em;border:none;border-radius:8px;cursor:pointer;transition:opacity .2s,transform .1s}.diagnose-btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}.diagnose-btn:active:not(:disabled){transform:translateY(0)}.diagnose-btn:disabled{opacity:.5;cursor:not-allowed}.error-message{margin-top:.75rem;padding:.6rem 1rem;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#fca5a5;font-size:.9rem;text-align:center}.sounds-section{margin-bottom:2.5rem}.sounds-section-title{font-family:var(--font-serif);font-size:1rem;color:var(--text-muted);letter-spacing:.1em;margin-bottom:.75rem;padding-left:.5rem;border-left:2px solid var(--accent-gold)}.sounds-grid{display:flex;flex-wrap:wrap;gap:.75rem}.sound-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;padding:1rem 1.25rem;flex:1;min-width:160px;max-width:240px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:transform .2s,box-shadow .2s}.sound-card:hover{transform:translateY(-2px);box-shadow:0 4px 20px #c9a96e1a}.sound-card.not-found{border-color:#ef44444d;background:#ef44440d}.sound-char{font-family:var(--font-serif);font-size:2rem;color:var(--accent-gold);text-align:center;margin-bottom:.5rem;text-shadow:0 0 15px rgba(201,169,110,.4)}.force-badge{display:inline-block;font-size:.7rem;padding:.2rem .6rem;border-radius:20px;margin-bottom:.5rem;font-weight:500;letter-spacing:.05em}.row-ア{background:#8b5cf633;color:#c4b5fd;border:1px solid rgba(139,92,246,.3)}.row-ワ{background:#6366f133;color:#a5b4fc;border:1px solid rgba(99,102,241,.3)}.row-カ{background:#3b82f633;color:#93c5fd;border:1px solid rgba(59,130,246,.3)}.row-サ{background:#06b6d433;color:#67e8f9;border:1px solid rgba(6,182,212,.3)}.row-タ{background:#ef444433;color:#fca5a5;border:1px solid rgba(239,68,68,.3)}.row-ナ{background:#22c55e33;color:#86efac;border:1px solid rgba(34,197,94,.3)}.row-ハ{background:#f59e0b33;color:#fcd34d;border:1px solid rgba(245,158,11,.3)}.row-マ{background:#ec489933;color:#f9a8d4;border:1px solid rgba(236,72,153,.3)}.row-ヤ{background:#a855f733;color:#d8b4fe;border:1px solid rgba(168,85,247,.3)}.row-ラ{background:#14b8a633;color:#5eead4;border:1px solid rgba(20,184,166,.3)}.row-ん{background:#c9a96e26;color:#c9a96e;border:1px solid rgba(201,169,110,.3)}.deity-name{font-family:var(--font-serif);font-size:.8rem;color:var(--accent-gold);margin-bottom:.4rem;line-height:1.4}.sound-meaning{font-size:.75rem;color:var(--text-muted);line-height:1.6}.loading-container{text-align:center;padding:3rem}.loading-orb{width:60px;height:60px;border-radius:50%;background:radial-gradient(circle,var(--accent-gold),transparent);margin:0 auto 1.5rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.2);opacity:1}}.loading-text{font-family:var(--font-serif);color:var(--accent-gold);font-size:.95rem;letter-spacing:.2em;animation:fadeInOut 2s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:1}}.diagnosis-result{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:2rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.diagnosis-result:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-gold),transparent)}.diagnosis-result h2{font-family:var(--font-serif);font-size:1.1rem;color:var(--accent-gold);margin-bottom:1.5rem;letter-spacing:.1em;text-align:center}.diagnosis-catchphrase{font-family:var(--font-serif);font-size:1.1rem;color:var(--accent-gold-light);text-align:center;margin-bottom:1.5rem;padding:1rem;border:1px solid rgba(201,169,110,.2);border-radius:8px;background:#c9a96e0d;letter-spacing:.05em;line-height:1.8}.diagnosis-body{font-size:.95rem;line-height:2;color:var(--text-washi);white-space:pre-wrap}.section-divider{border:none;border-top:1px solid rgba(201,169,110,.15);margin:2.5rem 0}@media (max-width: 600px){.app{padding:1rem .75rem 3rem}.input-row{flex-direction:column}.sound-card{min-width:130px}.diagnosis-result{padding:1.25rem}}