@import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;700&family=Shippori+Mincho:wght@400;700&display=swap);:root{--bg:#080c14;--navy:#111c30;--accent:#4a7fc1;--accent2:#7aaee8;--silver:#a8b8cc;--muted:#4a5a70;--female:#c084b0;--male:#6aa3d8;--text:#d0dcea}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:'Noto Serif JP',serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.5rem 1.5rem;position:relative;overflow-x:hidden}body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 15% 25%,rgba(74,127,193,.12) 0%,transparent 55%),radial-gradient(ellipse at 85% 70%,rgba(192,132,176,.08) 0%,transparent 50%),radial-gradient(ellipse at 50% 0%,rgba(22,35,64,.8) 0%,transparent 60%);pointer-events:none}.noise{position:fixed;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.header{text-align:center;margin-bottom:2.5rem}h1{font-family:'Shippori Mincho',serif;font-size:clamp(1.4rem,4.5vw,2.6rem);font-weight:700;color:var(--text);letter-spacing:.18em;text-shadow:0 0 30px rgba(74,127,193,.3),0 2px 8px rgba(0,0,0,.6)}.subtitle{color:var(--muted);font-size:.72rem;letter-spacing:.4em;margin-top:.6rem}.card{background:var(--navy);border:1px solid rgba(74,127,193,.18);border-radius:4px;padding:2.5rem 2rem;width:100%;max-width:500px;position:relative;box-shadow:0 0 0 1px rgba(255,255,255,.03),0 8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04)}.card::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:4px;background:linear-gradient(135deg,rgba(74,127,193,.15) 0%,transparent 40%,transparent 60%,rgba(192,132,176,.08) 100%);pointer-events:none}.result-box{background:rgba(8,12,20,.6);border:1px solid rgba(74,127,193,.15);border-radius:3px;padding:1.8rem 1.5rem;text-align:center;margin-bottom:1.5rem;min-height:88px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.result-box::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(74,127,193,.4),transparent)}#hn-result{font-family:'Shippori Mincho',serif;font-size:clamp(1.5rem,5vw,2.2rem);font-weight:700;color:var(--accent2);letter-spacing:.12em;text-shadow:0 0 25px rgba(122,174,232,.45);opacity:0;transition:opacity 0.45s ease,transform 0.45s ease,color 0.3s ease,text-shadow 0.3s ease;transform:translateY(6px)}#hn-result.show{opacity:1;transform:translateY(0)}#hn-result.female{color:var(--female);text-shadow:0 0 25px rgba(192,132,176,.55)}#hn-result.male{color:var(--male);text-shadow:0 0 25px rgba(106,163,216,.55)}.gender-select{display:flex;gap:.6rem;margin-bottom:1rem}.btn-gender{flex:1;padding:.55rem .5rem;background:rgba(255,255,255,.02);border:1px solid rgba(74,90,112,.5);color:var(--muted);font-family:'Noto Serif JP',serif;font-size:.85rem;letter-spacing:.2em;cursor:pointer;transition:all 0.25s;border-radius:2px}.btn-gender.active[data-gender="female"]{background:rgba(192,132,176,.1);border-color:rgba(192,132,176,.55);color:var(--female);text-shadow:0 0 12px rgba(192,132,176,.4)}.btn-gender.active[data-gender="male"]{background:rgba(106,163,216,.1);border-color:rgba(106,163,216,.55);color:var(--male);text-shadow:0 0 12px rgba(106,163,216,.4)}.btn-gender:hover:not(.active){border-color:rgba(74,127,193,.4);color:var(--silver)}.btn-generate{width:100%;padding:.95rem;background:linear-gradient(135deg,#1a2d4a,#0f1e33);color:var(--accent2);border:1px solid rgba(74,127,193,.35);font-family:'Shippori Mincho',serif;font-size:1rem;letter-spacing:.4em;cursor:pointer;transition:all 0.3s;border-radius:2px;position:relative;overflow:hidden}.btn-generate::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(74,127,193,.08),transparent);opacity:0;transition:opacity 0.3s}.btn-generate:hover{border-color:rgba(122,174,232,.6);box-shadow:0 0 20px rgba(74,127,193,.2),0 4px 16px rgba(0,0,0,.4);transform:translateY(-1px)}.btn-generate:hover::before{opacity:1}.btn-generate:active{transform:translateY(0)}.btn-generate:disabled{opacity:.4;cursor:not-allowed;transform:none}.divider{width:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(74,127,193,.25),transparent);margin:2rem auto}.history{width:100%;max-width:500px}.history h2{color:var(--muted);font-size:.7rem;letter-spacing:.4em;margin-bottom:.9rem;text-align:center;font-weight:400}.history-list{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center}.history-item{background:rgba(13,20,34,.7);border:1px solid rgba(192,132,176,.18);color:rgba(192,132,176,.65);padding:.28em .75em;font-size:.82rem;cursor:pointer;transition:all 0.2s;font-family:'Shippori Mincho',serif;border-radius:2px;letter-spacing:.05em}.history-item:hover{background:rgba(192,132,176,.07);border-color:rgba(192,132,176,.45);color:var(--female)}.history-item[data-gender="male"]{border-color:rgba(106,163,216,.18);color:rgba(106,163,216,.65)}.history-item[data-gender="male"]:hover{background:rgba(106,163,216,.07);border-color:rgba(106,163,216,.45);color:var(--male)}.btn-back{display:block;width:100%;max-width:500px;padding:.75rem;background:rgba(255,255,255,.02);border:1px solid rgba(74,90,112,.4);color:var(--muted);font-family:'Shippori Mincho',serif;font-size:.9rem;letter-spacing:.3em;text-align:center;text-decoration:none;transition:all 0.3s;margin-bottom:2rem;border-radius:2px}.btn-back:hover{background:rgba(74,127,193,.06);border-color:rgba(74,127,193,.35);color:var(--silver);transform:translateY(-1px)}@media (max-width:480px){body{padding:1.5rem 1rem;justify-content:flex-start;padding-top:2rem}.card{padding:1.8rem 1.3rem}h1{font-size:clamp(1.2rem,5.5vw,1.8rem)}.subtitle{font-size:.65rem}.btn-generate{font-size:.95rem;letter-spacing:.3em}.btn-gender{font-size:.8rem}}