*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a12;--surface:#ffffff0a;--border:#ffffff12;--fg:#e8e8ed;--fg-muted:#ffffff59;--fg-dim:#ffffff2e;--accent:#c4a7e7;--accent-glow:#c4a7e740;--error:#f38ba8;--font-serif:"Noto Serif JP", Georgia, serif;--font-sans:"Inter", system-ui, sans-serif}body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;min-height:100dvh}.container{justify-content:center;align-items:center;min-height:100dvh;padding:2rem;display:flex;position:relative;overflow:hidden}.main{z-index:1;flex-direction:column;gap:2rem;width:100%;max-width:480px;display:flex;position:relative}.bg-circle{filter:blur(120px);opacity:.35;pointer-events:none;border-radius:50%;position:fixed}.bg-circle-1{background:radial-gradient(circle, var(--accent) 0%, transparent 70%);width:500px;height:500px;top:-15%;right:-10%}.bg-circle-2{background:radial-gradient(circle,#7c3aed 0%,#0000 70%);width:400px;height:400px;bottom:-10%;left:-10%}.header{text-align:center}.label{font-family:var(--font-sans);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-dim);margin-bottom:.5rem;font-size:.6rem;font-weight:600}.title{font-family:var(--font-serif);letter-spacing:-.02em;color:var(--fg);font-size:3.5rem;font-weight:700;line-height:1}.accent{color:var(--accent)}.subtitle{color:var(--fg-muted);max-width:360px;margin-top:.75rem;margin-left:auto;margin-right:auto;font-size:.85rem;line-height:1.6}.demo-banner{background:#c4a7e70f;border:1px solid #c4a7e733;border-radius:12px;padding:.75rem 1rem}.demo-label{text-transform:uppercase;letter-spacing:.15em;color:var(--accent);font-size:.65rem;font-weight:600}.demo-sub{color:var(--fg-muted);margin-top:.2rem;font-size:.75rem}.api-key-area{flex-direction:column;gap:.4rem;display:flex}.api-key-label{color:var(--fg-muted);font-size:.8rem;font-weight:500}.api-key-input{background:var(--surface);border:1px solid var(--border);font-size:.8rem;font-family:var(--font-sans);color:var(--fg);border-radius:12px;outline:none;padding:.65rem 1rem;transition:border-color .2s}.api-key-input::placeholder{color:var(--fg-dim)}.api-key-input:focus{border-color:#c4a7e74d}.api-key-hint{color:var(--fg-dim);font-size:.7rem}.api-key-hint a{color:var(--accent);text-underline-offset:3px;text-decoration:underline}.input-area{gap:.5rem;display:flex}.input{background:var(--surface);border:1px solid var(--border);font-size:.85rem;font-family:var(--font-sans);color:var(--fg);border-radius:12px;outline:none;flex:1;padding:.75rem 1rem;transition:border-color .2s}.input::placeholder{color:var(--fg-dim);font-style:italic}.input:focus{border-color:#c4a7e74d}.generate-btn{background:linear-gradient(135deg, var(--accent), #7c3aed);color:#fff;font-size:.85rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;min-width:80px;padding:.75rem 1.5rem;transition:opacity .2s,transform .15s;display:flex}.generate-btn:hover:not(:disabled){opacity:.9;transform:scale(1.02)}.generate-btn:active:not(:disabled){transform:scale(.98)}.generate-btn:disabled{opacity:.4;cursor:not-allowed}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.haiku-card{background:var(--surface);border:1px solid var(--border);text-align:center;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 60px var(--accent-glow);border-radius:16px;width:max-content;min-width:100%;max-width:90vw;padding:2.5rem 2rem}.haiku-lines{flex-direction:column;gap:.6rem;display:flex}.haiku-line{font-family:var(--font-serif);color:var(--fg);opacity:0;white-space:nowrap;font-size:1.25rem;line-height:1.7;transition:opacity .5s,transform .5s;transform:translateY(8px)}.haiku-line.visible{opacity:1;transform:translateY(0)}.haiku-controls{justify-content:center;margin-top:1rem;display:flex}.toggle-btn{border:1px solid var(--border);font-size:.65rem;font-family:var(--font-sans);color:var(--fg-dim);cursor:pointer;background:0 0;border-radius:8px;padding:.3rem .75rem;transition:color .2s,border-color .2s}.toggle-btn:hover{color:var(--fg-muted);border-color:#ffffff26}.haiku-line-wrapper{border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:.5rem;min-height:2.4rem;padding:4px 8px;transition:border-color .2s,background .2s;display:flex}.haiku-line-wrapper.drop-target{background:#c4a7e70d;border-color:#c4a7e74d}.syllable-count{font-size:.6rem;font-family:var(--font-sans);text-align:center;flex-shrink:0;min-width:1.2rem;font-weight:600}.syllable-count.match{color:#9ccfd880}.syllable-count.mismatch{color:#eb6f9299}.drag-overlay-word{font-family:var(--font-serif);background:#c4a7e726;border-radius:4px;padding:2px 6px;font-size:1.25rem;box-shadow:0 0 16px #c4a7e74d}.credits{text-transform:uppercase;letter-spacing:.15em;color:var(--fg-dim);margin-top:1rem;font-size:.65rem}.demo-drag-note{color:var(--fg-dim);margin-top:.5rem;font-size:.6rem;font-style:italic}.haiku-card.shimmer{animation:1.5s ease-in-out infinite alternate shimmer}@keyframes shimmer{0%{opacity:1}to{opacity:.6}}.onboarding-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;padding:2rem;display:flex;position:fixed;inset:0}.onboarding-card{border:1px solid var(--border);text-align:center;background:#1a1a2e;border-radius:16px;max-width:340px;padding:2rem}.onboarding-step{text-transform:uppercase;letter-spacing:.15em;color:var(--fg-dim);margin-bottom:.75rem;font-size:.6rem;font-weight:600}.onboarding-title{font-family:var(--font-serif);color:var(--fg);margin-bottom:.5rem;font-size:1.1rem;font-weight:600}.onboarding-text{color:var(--fg-muted);margin-bottom:1.5rem;font-size:.8rem;line-height:1.6}.onboarding-actions{justify-content:center;gap:1rem;display:flex}.onboarding-skip{font-size:.75rem;font-family:var(--font-sans);color:var(--fg-dim);cursor:pointer;background:0 0;border:none;padding:.5rem 1rem}.onboarding-skip:hover{color:var(--fg-muted)}.onboarding-next{background:linear-gradient(135deg, var(--accent), #7c3aed);color:#fff;font-size:.75rem;font-weight:600;font-family:var(--font-sans);cursor:pointer;border:none;border-radius:8px;padding:.5rem 1.25rem;transition:opacity .2s}.onboarding-next:hover{opacity:.9}.help-btn{border:1px solid var(--border);width:20px;height:20px;font-size:.6rem;font-family:var(--font-sans);color:var(--fg-dim);cursor:pointer;vertical-align:middle;background:0 0;border-radius:50%;justify-content:center;align-items:center;margin-right:.5rem;font-weight:600;transition:color .2s,border-color .2s;display:inline-flex}.help-btn:hover{color:var(--fg-muted);border-color:#ffffff26}.error-card{color:var(--error);background:#f38ba814;border:1px solid #f38ba826;border-radius:12px;padding:.75rem 1rem;font-size:.8rem}.footer{text-align:center;color:var(--fg-dim);font-size:.7rem}.footer a{color:var(--fg-dim);text-decoration:none;transition:color .2s}.footer a:hover{color:var(--fg-muted)}.dot{margin:0 .4rem}