:root { color-scheme: light; --paper:#f2eee5; --ink:#151513; --muted:#747067; --line:#d4cec1; --acid:#73e2c0; --violet:#aa7cff; --orange:#ff7648; --panel:rgba(255,255,252,.82); }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 87% 10%,rgba(170,124,255,.14),transparent 27%),radial-gradient(circle at 10% 45%,rgba(185,255,69,.12),transparent 24%),var(--paper); color:var(--ink); font-family:Inter,Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
input,textarea,select { width:100%; border:1px solid var(--line); border-radius:10px; outline:0; background:rgba(255,255,252,.88); color:var(--ink); }
input:focus,textarea:focus,select:focus { border-color:#428c75; box-shadow:0 0 0 4px rgba(185,255,69,.16); }
textarea { resize:vertical; }
.grain { position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(21,21,19,.026) 1px,transparent 1px),linear-gradient(90deg,rgba(21,21,19,.026) 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(#000,transparent 94%); }
.site-header { position:relative; z-index:2; max-width:1240px; margin:auto; padding:23px 30px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; border-bottom:1px solid rgba(21,21,19,.14); }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand img { border-radius:11px; }
.brand span { display:flex; align-items:baseline; gap:8px; }
.brand strong { font-size:20px; letter-spacing:-.045em; }
.brand small { font-size: 14px; font-weight:900; letter-spacing:.19em; }
.site-header nav { display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,252,.54); }
.site-header nav a { padding:7px 11px; border-radius:999px; color:#625e56; text-decoration:none; font-size: 14px; font-weight:800; }
.site-header nav a:hover { background:var(--ink); color:#fff; }
.signal { justify-self:end; display:flex; align-items:center; gap:8px; color:#5f5b54; font-size: 14px; font-weight:750; }
.signal i { width:7px; height:7px; border-radius:50%; background:#46c79f; box-shadow:0 0 0 5px rgba(123,199,70,.12); }
main { position:relative; z-index:1; max-width:1180px; margin:auto; padding:80px 30px 120px; }
.hero { min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:10px; font-size: 14px; font-weight:900; letter-spacing:.16em; }
.eyebrow b { padding:6px 9px; border:1px solid var(--ink); border-radius:999px; font-size: 14px; letter-spacing:.04em; }
.hero h1 { margin:28px 0 24px; font-size:clamp(62px,8.5vw,105px); line-height:.9; letter-spacing:-.08em; }
.hero h1 em { color:var(--violet); font-style:normal; }
.hero-copy>p { max-width:630px; color:#66625b; font-size:16px; line-height:1.8; word-break:keep-all; }
.hero-cta { width:178px; height:52px; display:flex; justify-content:space-between; align-items:center; margin-top:34px; padding:0 15px; border:1px solid var(--ink); border-radius:10px; background:var(--acid); color:var(--ink); font-size: 14px; font-weight:900; text-decoration:none; box-shadow:5px 5px 0 var(--ink); }
.hero-stage { position:relative; min-height:490px; }
.record { position:absolute; right:3%; top:20px; width:min(400px,85vw); aspect-ratio:1; border-radius:50%; background:repeating-radial-gradient(circle,#23231f 0 2px,#161614 3px 5px); border:1px solid #090909; box-shadow:20px 23px 0 rgba(21,21,19,.08),0 30px 70px rgba(74,54,112,.25); animation:spin 18s linear infinite; }
.record::after { content:""; position:absolute; inset:47%; border-radius:50%; background:#111; box-shadow:0 0 0 56px var(--violet),0 0 0 58px #171614; }
.record-label { position:absolute; inset:36%; z-index:2; display:grid; place-items:center; text-align:center; font-size: 14px; font-weight:900; letter-spacing:.08em; line-height:1.4; }
.record-label img { width:28px; border-radius:8px; margin-bottom:4px; }
.wave { position:absolute; z-index:3; left:-2%; right:0; bottom:86px; height:88px; display:flex; align-items:center; justify-content:center; gap:5px; padding:0 20px; border:1px solid var(--ink); border-radius:8px; background:rgba(185,255,69,.9); box-shadow:9px 11px 0 var(--ink); transform:rotate(-3deg); }
.wave i { width:5px; height:var(--h,30%); background:var(--ink); border-radius:99px; }
.wave i:nth-child(3n) { --h:75%; }.wave i:nth-child(4n) { --h:42%; }.wave i:nth-child(5n) { --h:92%; }.wave i:nth-child(7n) { --h:58%; }
.hero-stage>p { position:absolute; right:5px; bottom:0; color:#817c73; font-family:ui-monospace,monospace; font-size: 14px; line-height:1.7; letter-spacing:.08em; text-align:right; }
@keyframes spin { to { transform:rotate(360deg); } }
.language-rule { display:grid; grid-template-columns:75px 1.1fr .9fr; gap:34px; align-items:center; padding:42px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.rule-index { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--acid); font-size: 14px; font-weight:900; }
.language-rule span,.section-copy>span,.history-head span { color:#77736b; font-family:ui-monospace,monospace; font-size: 14px; letter-spacing:.13em; }
.language-rule h2 { margin:11px 0 0; font-size:30px; line-height:1.18; letter-spacing:-.045em; }
.language-rule h2 em { color:#8a52ee; font-style:normal; }
.language-rule>p { margin:0; color:#706c64; font-size: 14px; line-height:1.78; word-break:keep-all; }
.auth-shell { min-height:650px; display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; align-items:center; padding:125px 0 40px; }
.section-copy h2 { margin:18px 0 20px; font-size:clamp(42px,5.5vw,65px); line-height:1.02; letter-spacing:-.064em; }
.section-copy p { max-width:480px; margin:0; color:#706c64; font-size: 14px; line-height:1.8; word-break:keep-all; }
.auth-card { padding:34px; border:1px solid var(--ink); border-radius:16px; background:rgba(255,255,252,.78); box-shadow:14px 15px 0 rgba(21,21,19,.06); }
.auth-card label,.composer>label,.settings-grid label { display:block; margin-bottom:9px; font-size: 14px; font-weight:850; }
.input-action { display:grid; grid-template-columns:1fr auto; gap:8px; }
.input-action input { height:53px; padding:0 15px; }
.input-action button,.verify-button { padding:0 19px; border:0; border-radius:10px; background:var(--ink); color:var(--acid); font-size: 14px; font-weight:850; }
.auth-card form>small { display:block; margin-top:10px; color:#8a867d; font-size: 14px; line-height:1.6; }
.code-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.code-head small { display:block; margin-top:4px; color:#858178; }.code-head button,#logout,#refresh { border:0; background:transparent; color:#396558; font-size: 14px; font-weight:850; }
.code-input { height:68px; padding-left:calc(15px + .27em); text-align:center; font-size:30px; font-weight:850; letter-spacing:.27em; }.verify-button { width:100%; height:52px; margin-top:9px; }
.message { margin:13px 0 0 !important; padding:11px 12px; border-radius:9px; background:#d8f5ec; color:#24493e !important; font-size: 14px !important; line-height:1.6; }.message.error { background:#fae2df; color:#8d332a !important; }button:disabled { opacity:.5; cursor:wait; }
.workspace { padding-top:125px; }.workspace-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:42px; }.section-copy.compact h2 { margin-bottom:0; }
.account-card { position:relative; min-width:300px; padding:16px 80px 16px 17px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,252,.56); }.account-card small,.account-card strong,.account-card span { display:block; }.account-card small { color:#437868; font-size: 14px; font-weight:850; }.account-card strong { margin-top:5px; font-size: 14px; }.account-card span { margin-top:4px; color:#89857d; font-size: 14px; }.account-card button { position:absolute; top:14px; right:13px; }
.workspace-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:start; }.composer,.result-panel { padding:28px; border:1px solid var(--ink); border-radius:16px; background:var(--panel); box-shadow:12px 14px 0 rgba(21,21,19,.045); }.result-panel { min-height:720px; position:sticky; top:20px; background:#191917; color:#f6f3eb; }
.form-top,.result-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:22px; }.form-top span,.result-head span { font-family:ui-monospace,monospace; font-size: 14px; font-weight:900; letter-spacing:.13em; }.form-top small,.result-head small { color:#8c887f; font-size: 14px; }
.prompt-guide { position:relative; margin-bottom:23px; padding:16px; border-radius:11px; background:var(--acid); }.prompt-guide b { font-size: 14px; letter-spacing:.12em; }.prompt-guide p { margin:7px 0 0; font-size: 14px; line-height:1.55; }.prompt-guide button { position:static; display:block; width:fit-content; margin-top:12px; min-height:40px; padding:8px 10px; border:1px solid var(--ink); border-radius:8px; background:transparent; font-size: 14px; font-weight:850; }
.composer>label span { margin-left:6px; color:#8052ca; font-size: 14px; }.composer textarea { min-height:136px; padding:14px; font-size: 14px; line-height:1.72; }.composer textarea.lyrics { min-height:175px; }.field-meta { display:flex; justify-content:space-between; gap:15px; margin:8px 2px 20px; color:#918d84; font-size: 14px; }.field-meta small { line-height:1.5; }.field-meta span { flex:0 0 auto; }
.lyrics-head { display:flex; justify-content:space-between; align-items:center; }.lyrics-head>label:first-child { font-size: 14px; font-weight:850; }.toggle { display:flex; align-items:center; gap:7px; font-size: 14px; font-weight:800; cursor:pointer; }.toggle input { position:absolute; opacity:0; pointer-events:none; }.toggle span { width:30px; height:17px; padding:2px; border-radius:99px; background:#c8c3b9; }.toggle span::after { content:""; display:block; width:13px; height:13px; border-radius:50%; background:white; transition:.2s; }.toggle input:checked+span { background:var(--ink); }.toggle input:checked+span::after { transform:translateX(13px); background:var(--acid); }
.settings { margin-top:4px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,252,.55); }.settings summary { padding:15px; list-style:none; cursor:pointer; font-size: 14px; font-weight:850; }.settings summary::-webkit-details-marker { display:none; }.settings summary::after { content:"+"; float:right; }.settings[open] summary::after { content:"−"; }.settings summary span { margin-left:8px; color:#8b877e; font-weight:500; }.settings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 15px 15px; }.settings-grid label { margin:0; color:#77736b; font-size: 14px; }.settings-grid select,.settings-grid input { height:42px; margin-top:6px; padding:0 10px; font-size: 14px; }
.consents { margin-top:18px; }.consents label { display:grid; grid-template-columns:17px 1fr; gap:9px; margin-top:11px; cursor:pointer; }.consents input { width:16px; height:16px; accent-color:var(--ink); }.consents b,.consents small { display:block; }.consents b { font-size: 14px; }.consents small { margin-top:3px; color:#8d8980; font-size: 14px; line-height:1.5; }
.primary { width:100%; height:56px; display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding:0 18px; border:1px solid var(--ink); border-radius:10px; background:var(--violet); color:#111; font-size: 14px; font-weight:900; box-shadow:5px 5px 0 var(--ink); }.primary:active { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }.quota-note { margin:14px 0 0; color:#918d84; font-size: 14px; text-align:center; }
.result-head { margin-bottom:0; }.result-head>div small { display:block; margin-top:4px; color:#8e8e82; }.result-head button { color:var(--acid) !important; }.empty-status { display:grid; place-items:center; padding-top:125px; text-align:center; }.equalizer { width:290px; height:155px; display:flex; justify-content:center; align-items:center; gap:8px; border-bottom:1px solid #54544c; }.equalizer i { width:8px; height:var(--h,28%); border-radius:99px; background:linear-gradient(var(--violet),var(--acid)); }.equalizer i:nth-child(2n){--h:64%}.equalizer i:nth-child(3n){--h:93%}.equalizer i:nth-child(5n){--h:45%}.empty-status h3 { margin:31px 0 9px; font-size:16px; }.empty-status p { max-width:360px; margin:0; color:#8f8f85; font-size: 14px; line-height:1.65; }
.active-status { padding-top:50px; }.status-line { display:flex; align-items:center; justify-content:space-between; }.status-line span { padding:7px 9px; border-radius:999px; background:rgba(185,255,69,.12); color:var(--acid); font-size: 14px; font-weight:850; }.status-line span.completed { background:var(--acid); color:var(--ink); }.status-line span.failed { background:rgba(255,118,72,.16); color:#ff9f76; }.status-line time { color:#77776f; font-size: 14px; }.active-status>h3 { margin:24px 0 14px; max-height:84px; overflow:hidden; font-size:18px; line-height:1.48; letter-spacing:-.02em; }.track-meta { display:flex; gap:6px; margin-bottom:28px; }.track-meta span { padding:6px 8px; border:1px solid #45453f; border-radius:7px; color:#aaa99f; font-size: 14px; }.progress { height:7px; overflow:hidden; border-radius:99px; background:#33332e; }.progress i { display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--violet),var(--acid)); transition:width .45s ease; }.progress-label { display:flex; justify-content:space-between; margin-top:9px; color:#99998e; font-size: 14px; }.progress-label b { color:var(--acid); }.active-status>p { min-height:40px; margin:18px 0; color:#96968b; font-size: 14px; line-height:1.7; }.player-shell { margin-top:30px; padding:20px; border:1px solid #45453e; border-radius:12px; background:#11110f; }.player-shell audio { width:100%; }.player-shell a { display:block; margin-top:13px; padding:12px; border-radius:8px; background:var(--acid); color:var(--ink); text-align:center; text-decoration:none; font-size: 14px; font-weight:900; }
.history { padding-top:110px; }.history-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:27px; }.history-head h2 { margin:10px 0 0; font-size:42px; letter-spacing:-.06em; }.history-head p { margin:0; color:#827f77; font-size: 14px; }.history-list { display:grid; gap:9px; }.history-item { display:grid; grid-template-columns:1fr auto; gap:20px; padding:20px 21px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,252,.52); }.history-main { min-width:0; }.history-meta { display:flex; align-items:center; gap:8px; }.history-meta span,.history-meta b { padding:5px 7px; border-radius:999px; font-size: 14px; }.history-meta span { background:var(--ink); color:var(--acid); font-weight:850; }.history-meta b { background:#efe6ff; color:#6c479d; }.history-meta time { color:#928e85; font-size: 14px; }.history-item h3 { margin:10px 0 0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size: 14px; }.history-item p { margin:6px 0 0; color:#837f77; font-size: 14px; line-height:1.55; }.history-actions { display:flex; align-items:center; gap:6px; }.history-actions a,.history-actions button { padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#5e5b54; text-decoration:none; font-size: 14px; font-weight:850; }.history-actions button.danger { color:#b44932; }.history-empty { padding:42px; border:1px dashed var(--line); border-radius:12px; color:#89857d; text-align:center; font-size: 14px; }
footer { max-width:1180px; margin:auto; padding:25px 30px 43px; display:flex; gap:25px; border-top:1px solid var(--line); color:#89857d; font-size: 14px; }footer a { margin-left:auto; color:var(--ink); font-weight:850; text-decoration:none; }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.record{animation:none}}
@media (max-width:940px){.hero{grid-template-columns:1fr}.hero-stage{width:min(500px,100%);margin:-30px auto 0}.language-rule{grid-template-columns:60px 1fr}.language-rule>p{grid-column:2}.auth-shell,.workspace-grid{grid-template-columns:1fr}.auth-shell{gap:45px}.result-panel{position:static;min-height:600px}.settings-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:660px){.site-header{grid-template-columns:1fr auto;padding:18px}.site-header nav{display:none}.signal{font-size:0}main{padding:46px 18px 85px}.hero{min-height:0;gap:35px}.hero h1{font-size:58px}.hero-copy>p{font-size: 14px}.hero-stage{min-height:405px}.record{right:4%;width:330px}.wave{bottom:45px}.language-rule{grid-template-columns:1fr;gap:18px}.rule-index{width:40px;height:40px}.language-rule>p{grid-column:1}.auth-shell{min-height:0;padding-top:90px}.input-action{grid-template-columns:1fr}.input-action button{height:50px}.workspace{padding-top:90px}.workspace-head,.history-head{align-items:flex-start;flex-direction:column}.account-card{width:100%;min-width:0}.composer,.result-panel{padding:20px}.form-top{align-items:flex-start;flex-direction:column;gap:6px}.prompt-guide{padding-right:16px}.prompt-guide button{position:static;margin-top:10px}.settings-grid{grid-template-columns:1fr 1fr}.history-item{grid-template-columns:1fr}.history-actions{flex-wrap:wrap}footer{padding:22px 18px 35px;flex-direction:column}footer a{margin-left:0}}