:root{--bg0: #07090d;--bg1: #0e131c;--bg2: #151c29;--ink: #e8eef7;--muted: #8b98ad;--line: rgba(232, 238, 247, .1);--accent: #7dffb3;--accent-2: #5ef0ff;--warn: #ffb454;--danger: #ff7a59;--radius: 18px;--font-display: "Syne", sans-serif;--font-body: "Manrope", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;font-family:var(--font-body);color:var(--ink);background:radial-gradient(1200px 700px at 12% -10%,rgba(125,255,179,.16),transparent 55%),radial-gradient(900px 600px at 90% 10%,rgba(94,240,255,.12),transparent 50%),radial-gradient(800px 500px at 50% 100%,rgba(155,183,255,.08),transparent 45%),linear-gradient(180deg,var(--bg0),var(--bg1) 45%,#0a0f16);background-attachment:fixed}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}a{color:var(--accent-2)}.app-shell{width:min(1120px,calc(100% - 2rem));margin:0 auto;padding:calc(1.25rem + env(safe-area-inset-top,0px)) 0 calc(4rem + env(safe-area-inset-bottom,0px))}.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}.chip{border-radius:999px;border:1px solid var(--line);background:#07090d66;color:var(--muted);padding:.5rem .9rem;font-size:.88rem;transition:border-color .2s,color .2s,background .2s}.chip:hover{border-color:#7dffb359;color:var(--ink)}.chip.active{border-color:#7dffb3b3;background:linear-gradient(160deg,#7dffb329,#5ef0ff0f);color:var(--ink)}.app-footer{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--line);text-align:center}.app-footer a{color:var(--muted);font-size:.9rem;text-decoration:none}.app-footer a:hover{color:var(--accent-2)}.link-btn{background:none;border:none;padding:0;color:var(--muted);font-size:.9rem;font-family:inherit;cursor:pointer;text-decoration:none;margin-left:1rem}.link-btn:hover{color:var(--accent-2)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}.brand{font-family:var(--font-display);font-weight:800;letter-spacing:.04em;font-size:1.15rem;text-transform:uppercase}.brand span{color:var(--accent)}.ghost-btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:.55rem 1rem;color:var(--muted);transition:border-color .2s,color .2s,transform .2s}.ghost-btn:hover{border-color:#7dffb373;color:var(--ink);transform:translateY(-1px)}.hero{min-height:min(78vh,720px);display:grid;align-content:end;gap:1.1rem;padding:3.5rem 0 2rem;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:8% -5% auto auto;width:min(52vw,520px);height:min(52vw,520px);border-radius:40% 60% 55% 45%;background:conic-gradient(from 120deg,rgba(125,255,179,.28),transparent 40%,rgba(94,240,255,.2),transparent 75%);filter:blur(8px);animation:drift 14s ease-in-out infinite alternate;pointer-events:none}.hero:after{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:45%;background:linear-gradient(180deg,transparent,rgba(7,9,13,.75));pointer-events:none}@keyframes drift{0%{transform:translate(-4%,2%) rotate(-6deg) scale(1)}to{transform:translate(3%,-3%) rotate(8deg) scale(1.08)}}.hero-brand{font-family:var(--font-display);font-weight:800;font-size:clamp(3.4rem,10vw,6.5rem);line-height:.92;letter-spacing:-.03em;position:relative;z-index:1;animation:rise .8s ease both}.hero-brand em{font-style:normal;color:var(--accent)}.hero h1{margin:0;max-width:16ch;font-family:var(--font-display);font-size:clamp(1.35rem,3.2vw,2rem);font-weight:700;line-height:1.2;position:relative;z-index:1;animation:rise .9s .08s ease both}.hero p{margin:0;max-width:36ch;color:var(--muted);font-size:1.05rem;line-height:1.55;position:relative;z-index:1;animation:rise 1s .14s ease both}.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;position:relative;z-index:1;animation:rise 1.05s .2s ease both}@keyframes rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.primary-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:999px;padding:.85rem 1.35rem;background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#061018;font-weight:700;transition:transform .2s,filter .2s}.primary-btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.primary-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;filter:none}.step-wrap{display:grid;gap:1.25rem;animation:rise .55s ease both}.step-meta{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem}.step-meta h2{margin:0;font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem)}.step-meta p{margin:.35rem 0 0;color:var(--muted)}.progress{display:flex;gap:.4rem}.progress i{width:42px;height:4px;border-radius:999px;background:#e8eef71f}.progress i.on{background:linear-gradient(90deg,var(--accent),var(--accent-2))}.panel{background:linear-gradient(180deg,#151c29e0,#0e131ceb);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}label.field{display:grid;gap:.45rem;margin-bottom:1rem}label.field span{color:var(--muted);font-size:.92rem}textarea,input[type=text]{width:100%;border-radius:14px;border:1px solid var(--line);background:#07090d8c;padding:.9rem 1rem;outline:none;transition:border-color .2s,box-shadow .2s}textarea{min-height:140px;resize:vertical;line-height:1.5}textarea:focus,input[type=text]:focus{border-color:#7dffb373;box-shadow:0 0 0 3px #7dffb31f}.actions{display:flex;flex-wrap:wrap;gap:.65rem}.lyrics-layout{display:grid;gap:1.25rem;align-items:start}.style-panel{display:flex;flex-direction:column}.style-axis-list{display:grid;gap:1.1rem;margin-top:.85rem}.style-axis-labels{display:flex;justify-content:space-between;gap:.5rem;font-size:.8rem;color:var(--muted);margin-bottom:.4rem}.style-axis input[type=range]{width:100%;height:4px;border-radius:999px;background:var(--line);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}.style-axis input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent-2);border:none;cursor:pointer}.style-axis input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent-2);border:none;cursor:pointer}@media(min-width:900px){.lyrics-layout{grid-template-columns:1fr 300px}.style-panel{position:sticky;top:1.25rem;max-height:calc(100vh - 2.5rem);overflow-y:auto}}.lyrics-box{white-space:pre-wrap;line-height:1.65;font-size:1.02rem;background:#07090d73;border-radius:14px;border:1px solid var(--line);padding:1.1rem 1.2rem;margin:0 0 1rem}.lyrics-edit{min-height:320px;font-family:inherit}.badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.25rem .65rem;font-size:.78rem;color:var(--muted);border:1px solid var(--line)}.style-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem}.style-card{text-align:left;border-radius:16px;border:1px solid var(--line);background:#07090d66;padding:1rem;transition:transform .2s,border-color .2s,background .2s}.style-card:hover{transform:translateY(-2px);border-color:#7dffb359}.style-card.active{border-color:#7dffb3b3;background:linear-gradient(160deg,#7dffb31f,#5ef0ff0d)}.style-card strong{display:block;font-family:var(--font-display);margin-bottom:.35rem}.style-card span{color:var(--muted);font-size:.9rem;line-height:1.4}.player{display:grid;gap:1rem}.now-playing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.wave{height:64px;border-radius:14px;border:1px solid var(--line);background:repeating-linear-gradient(90deg,rgba(125,255,179,.15) 0 3px,transparent 3px 10px),#07090d73;position:relative;overflow:hidden}.wave:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(94,240,255,.25),transparent);transform:translate(-100%)}.wave.live:before{animation:sweep 2.2s linear infinite}@keyframes sweep{to{transform:translate(100%)}}.line-list{display:grid;gap:.35rem;max-height:280px;overflow:auto;padding-right:.25rem}.line-list div{padding:.4rem .6rem;border-radius:10px;color:var(--muted);transition:background .2s,color .2s}.line-list div.active{background:#7dffb31f;color:var(--ink)}.save-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}.save-option{border:1px solid var(--line);border-radius:16px;background:#07090d66;padding:1rem;text-align:left;transition:border-color .2s,transform .2s}.save-option:hover{border-color:#5ef0ff73;transform:translateY(-2px)}.save-option strong{display:block;margin-bottom:.3rem;font-family:var(--font-display)}.save-option span{color:var(--muted);font-size:.9rem}.library{display:grid;gap:.75rem}.library-item{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;background:#07090d59}.error{color:var(--danger);margin:.5rem 0 0}.hint{color:var(--muted);font-size:.9rem}.support-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#04060ab8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:50;animation:rise .25s ease both}.support-panel{max-width:380px;width:100%;text-align:center}.offer-panel{max-width:640px;max-height:80vh;overflow-y:auto;text-align:left}.offer-panel h4{margin:1.1rem 0 .35rem;font-family:var(--font-display);font-size:.95rem;color:var(--ink)}.offer-panel h4:first-of-type{margin-top:.75rem}.support-qr{width:100%;max-width:240px;margin:.5rem auto 0;border-radius:14px;display:block;border:1px solid var(--line)}.oops-hint{display:grid;gap:.5rem;justify-items:start;margin-top:.5rem;padding:.85rem 1rem;border-radius:14px;border:1px dashed rgba(255,180,84,.4);background:#ffb45414}.oops-hint p{margin:0}@media(max-width:640px){.hero{min-height:70vh;padding-top:2rem}.progress i{width:28px}.topbar{gap:.5rem}.topbar .actions{gap:.4rem}.ghost-btn,.primary-btn,.chip{padding:.7rem 1rem;min-height:44px}.style-card,.save-option{padding:.85rem}.now-playing{flex-direction:column;align-items:stretch}.now-playing .actions{justify-content:stretch}.now-playing .actions button{flex:1}.line-list{max-height:45vh}.support-panel{max-width:100%}.hero-brand{font-size:clamp(2.6rem,14vw,4rem)}}