body{margin:0}:root{--primary:#2563eb;--bg:#f8fafc;--card-bg:#fff;--text:#1e293b;--text-muted:#64748b;--border:#e2e8f0;--error:#ef4444;--radius:16px;--shadow:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a}[data-theme=dark]{--bg:#0f172a;--card-bg:#1e293b;--text:#f1f5f9;--text-muted:#94a3b8;--border:#334155;--shadow:0 4px 6px -1px #0000004d}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg);color:var(--text);font-family:Inter,Noto Sans JP,sans-serif;line-height:1.6;transition:background-color .3s,color .3s}.container{max-width:650px;margin:0 auto;padding:40px 20px}.card{background-color:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--border);margin-bottom:24px;padding:32px;transition:transform .2s}.btn{cursor:pointer;border:none;border-radius:30px;justify-content:center;align-items:center;gap:8px;padding:10px 20px;font-size:15px;font-weight:600;transition:all .2s;display:inline-flex;text-decoration:none!important}.btn-primary{background-color:var(--primary);color:#fff!important}.btn-primary:hover{filter:brightness(.9);color:#fff!important}.btn-outline{border:1px solid var(--border);background-color:#0000;color:var(--text)!important}.btn-outline:hover{background-color:var(--border);color:var(--text)!important}.btn-sm{padding:6px 14px;font-size:13px}.btn-outline.active{background-color:var(--primary);border-color:var(--primary);box-shadow:0 0 0 3px #2563eb33;color:#fff!important}.form-group{text-align:left;margin-bottom:20px}.form-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;font-size:13px;font-weight:700;display:block}.form-control{border:1px solid var(--border);background-color:var(--bg);width:100%;color:var(--text);border-radius:12px;padding:12px 16px;font-size:15px;transition:border-color .2s}.form-control:focus{border-color:var(--primary);outline:none}textarea.form-control{resize:vertical;min-height:80px}a{color:var(--primary);text-decoration:none;transition:opacity .2s}a:hover{opacity:.8;text-decoration:none}.theme-toggle{background-color:var(--card-bg);width:48px;height:48px;box-shadow:var(--shadow);color:var(--text);cursor:pointer;z-index:1000;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:transform .2s;display:flex;position:fixed;bottom:24px;right:24px}.theme-toggle:hover{transform:scale(1.1)}.theme-toggle-btn{color:var(--text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;font-size:18px;transition:background .2s;display:flex}.theme-toggle-btn:hover{background:#94a3b81a}.markdown-body{font-size:15px;line-height:1.7}.markdown-body p{margin-bottom:12px}.media-container{border:1px solid var(--border);border-radius:12px;width:100%;margin:16px 0;padding-top:56.25%;position:relative;overflow:hidden}.media-container iframe{border:none;width:100%;height:100%;position:absolute;inset:0}.spotify-container{border-radius:12px;margin:16px 0;overflow:hidden}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background:var(--card-bg);border-radius:var(--radius);width:90%;max-width:400px;padding:24px;box-shadow:0 20px 25px -5px #0003}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-close{cursor:pointer;color:var(--text-muted);background:0 0;border:none;font-size:24px}.badge{color:var(--primary);background:#2563eb14;border:1px solid #2563eb1a;border-radius:20px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;display:inline-flex}.badge-hobby{background:var(--primary);color:#fff;padding:8px 18px;font-size:15px;font-weight:700}.share-section{border-top:1px solid var(--border);flex-direction:column;align-items:center;gap:12px;margin-top:32px;padding-top:24px;display:flex}.share-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.15em;margin-bottom:4px;font-size:11px;font-weight:800}.qr-modal-content{flex-direction:column;align-items:center;gap:16px;padding:20px 0;display:flex}.qr-image{border:1px solid var(--border);background:#fff;border-radius:12px;width:200px;height:200px;padding:10px}.upload-overlay{color:#fff;background:#0006;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex;position:absolute;inset:0}.loading-dots:after{content:" .";animation:1.5s steps(5,end) infinite dots}@keyframes dots{0%,20%{content:" ."}40%{content:" .."}60%{content:" ..."}80%,to{content:""}}