/* Golden Ring Studio: the AI song studio page. Layered after /style.css and /pages.css (site tokens, header, footer). */
:root{--gold2:#f3d491;--ink:#060c17;--panel:#0f1b2b;--panel2:#13233a;--ok:#7fd8a6;--err:#ff8f8f;--r:18px;--gut:max(20px,env(safe-area-inset-right),env(safe-area-inset-left))}
/* the site's generic form{} card style is for its contact form; studio forms style themselves */
.studio-page :where(form){background:none;padding:0;border:0;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;touch-action:manipulation}
body.studio-page{background:radial-gradient(1200px 700px at 85% -10%,#1b2f4a 0%,transparent 60%),var(--bg);overflow-x:hidden}
.studio-page main{overflow-x:clip}
.st-wrap{width:min(1240px,100%);margin:0 auto;padding-inline:var(--gut)}
.st-hero{position:relative;min-height:min(86vh,820px);display:grid;align-items:center;padding-block:56px 40px;isolation:isolate}
.st-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.st-hero .st-wrap{display:grid;gap:22px}
.st-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-weight:700;font-size:14px;letter-spacing:.02em}
.st-kicker i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #dfb76826}
.st-hero h1{font-size:clamp(40px,8.6vw,104px);line-height:.98;letter-spacing:-.03em;max-width:12ch;text-wrap:balance}
.st-hero h1 em{font-style:normal;color:transparent;background:linear-gradient(100deg,var(--gold2),var(--gold));-webkit-background-clip:text;background-clip:text}
.st-hero p.lead{font-size:clamp(17px,2.1vw,21px);line-height:1.7;color:#d9e0e4;max-width:56ch;margin:0}
.st-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:16px;cursor:pointer;transition:transform .18s ease,background .2s,border-color .2s,opacity .2s;white-space:nowrap}
.st-btn:active{transform:scale(.97)}
.st-btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1407;box-shadow:0 10px 30px -10px #dfb768aa}
.st-btn.gold:hover{filter:brightness(1.06)}
.st-btn.ghost{background:#ffffff08;border-color:#ffffff2e;color:var(--white)}
.st-btn.ghost:hover{border-color:var(--gold);color:var(--gold2)}
.st-btn.small{min-height:40px;padding:0 16px;font-size:14px}
.st-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.st-proof{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:14px}
.st-proof b{color:var(--white)}
.st-steps{padding-block:40px 70px}
.st-steps ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.st-steps li{position:relative;padding:22px 22px 22px 22px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,#ffffff0a,#ffffff02);transition:border-color .6s}
.st-steps li.on{opacity:1;transform:none;border-color:#dfb76855}
.st-steps li b{display:block;font-size:20px;margin-bottom:6px}
.st-steps li span{color:var(--muted);line-height:1.7}
.st-steps li::before{content:attr(data-n);position:absolute;inset-inline-end:18px;top:14px;font:800 44px/1 Heebo,sans-serif;color:#dfb7681f}
.st-h2{font-size:clamp(30px,4.4vw,52px);line-height:1.12;letter-spacing:-.02em;margin-bottom:12px;text-wrap:balance}
.st-sub{color:var(--muted);margin:0 0 26px;line-height:1.7}
/* studio */
.st-studio{padding-block:30px 80px;scroll-margin-top:96px}
.st-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid #ffffff1a;border-radius:24px;box-shadow:0 30px 80px -40px #000}
.st-auth{max-width:520px;margin:0 auto;padding:26px}
.st-tabs{display:flex;gap:6px;background:#ffffff0a;border-radius:999px;padding:5px;margin-bottom:20px}
.st-tabs button{flex:1;min-height:42px;border:0;border-radius:999px;background:none;color:var(--muted);font-weight:700}
.st-tabs button[aria-selected=true]{background:var(--white);color:var(--ink)}
.st-field{display:grid;gap:6px;margin-bottom:14px}
.st-field label,.st-label{font-size:14px;font-weight:700;color:#dfe5e8}
.st-input,.st-textarea,.st-select{width:100%;font-size:16px;color:var(--white);background:#07101d;border:1px solid #ffffff26;border-radius:12px;padding:11px 14px;min-height:46px;transition:border-color .2s,box-shadow .2s}
.st-textarea{min-height:120px;resize:vertical;line-height:1.75}
.st-input:focus,.st-textarea:focus,.st-select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #dfb76833}
.st-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted);line-height:1.6;margin:6px 0 16px}
.st-check input{width:20px;height:20px;accent-color:var(--gold);margin-top:2px;flex:none}
.st-msg{min-height:22px;font-size:14px;margin:8px 0 0}
.st-msg.err{color:var(--err)}.st-msg.ok{color:var(--ok)}
.st-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;margin-bottom:16px}
.st-bar .who{display:flex;align-items:center;gap:12px;min-width:0}
.st-bar .who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-pill{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:#dfb7681a;border:1px solid #dfb76855;color:var(--gold2);font-weight:700;font-size:14px;white-space:nowrap}
.st-bar .acts{display:flex;flex-wrap:wrap;gap:8px}
.st-grid{display:grid;gap:16px}
.st-chat{display:flex;flex-direction:column;min-height:520px;max-height:76vh;overflow:hidden}
.st-chat header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid #ffffff14}
.st-chat header h3{font-size:18px}
.st-chat header small{display:block;color:var(--muted);font-size:13px;font-weight:400}
.st-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;overscroll-behavior:contain}
.st-bubble{max-width:88%;padding:12px 14px;border-radius:16px;line-height:1.7;font-size:15.5px;white-space:pre-wrap;overflow-wrap:anywhere}
.st-bubble.user{align-self:flex-start;background:#ffffff12;border-end-start-radius:4px}
.st-bubble.agent{align-self:flex-end;background:linear-gradient(160deg,#dfb76822,#dfb7680d);border:1px solid #dfb76840;border-end-end-radius:4px}
.st-bubble.note{align-self:center;background:none;color:var(--muted);font-size:13px;text-align:center}
.st-bubble .warn{display:block;margin-top:8px;color:#ffcf8a;font-size:13px}
.st-typing{align-self:flex-end;display:inline-flex;gap:5px;padding:14px 16px;border-radius:16px;background:#dfb76814}
.st-typing i{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:st-dot 1.2s infinite}
.st-typing i:nth-child(2){animation-delay:.15s}.st-typing i:nth-child(3){animation-delay:.3s}
@keyframes st-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.st-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.st-chip{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid #ffffff2a;background:#ffffff08;color:var(--white);font-size:14px;cursor:pointer;transition:border-color .2s,background .2s}
.st-chip:hover,.st-chip[aria-pressed=true]{border-color:var(--gold);background:#dfb7681f;color:var(--gold2)}
.st-compose{display:flex;gap:8px;padding:12px;border-top:1px solid #ffffff14;align-items:flex-end}
.st-compose textarea{flex:1;min-height:48px;max-height:160px;resize:none}
.st-compose .st-btn{flex:none;width:52px;padding:0}
.st-sheet{padding:18px}
.st-sheet h3{font-size:18px;margin-bottom:4px}
.st-sheet .hint{color:var(--muted);font-size:13px;margin:0 0 14px;line-height:1.6}
.st-seg{display:flex;flex-wrap:wrap;gap:6px}
.st-seg button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #ffffff26;background:#ffffff06;color:var(--white);font-size:14px}
.st-seg button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#1a1407;font-weight:700}
.st-row2{display:grid;gap:12px}
.st-range{display:grid;gap:6px;margin-bottom:12px}
.st-range .top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.st-range .top output{color:var(--gold2);font-weight:700;font-variant-numeric:tabular-nums}
.st-range input[type=range]{width:100%;accent-color:var(--gold);height:28px}
details.st-adv{border:1px solid #ffffff1a;border-radius:14px;margin:14px 0;background:#ffffff04}
details.st-adv summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between}
details.st-adv summary::after{content:'+';color:var(--gold)}
details.st-adv[open] summary::after{content:'−'}
details.st-adv .in{padding:4px 16px 14px}
.st-create{position:sticky;bottom:0;z-index:5;margin:14px -18px -18px;padding:22px 18px 14px;display:grid;gap:8px;background:linear-gradient(180deg,#0f1b2b00,var(--panel) 34%);border-radius:0 0 24px 24px}
.st-create .st-btn{width:100%;min-height:56px;font-size:18px}
.st-create small{color:var(--muted);text-align:center;font-size:13px}
.st-lyrics{font-size:17px;line-height:2;min-height:260px;unicode-bidi:plaintext;text-align:start}
.st-bubble{unicode-bidi:plaintext}
.st-count{font-size:12px;color:var(--muted);text-align:left;direction:ltr}
/* library */
.st-lib{margin-top:28px}
.st-lib-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.st-tracks{display:grid;gap:14px}
.st-track{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:14px;align-items:start}
.st-track .art{width:72px;height:72px;border-radius:14px;object-fit:cover;background:linear-gradient(135deg,#dfb76840,#17283a)}
.st-track h4{font-size:17px;margin:0 0 4px;overflow-wrap:anywhere}
.st-track .meta{font-size:13px;color:var(--muted);margin:0 0 10px}
.st-player{display:flex;align-items:center;gap:10px}
.st-play{width:46px;height:46px;border-radius:50%;border:0;background:var(--gold);color:#1a1407;display:grid;place-items:center;flex:none;font-size:16px}
.st-prog{flex:1;height:34px;position:relative;cursor:pointer;touch-action:none}
.st-prog::before{content:'';position:absolute;inset:15px 0;border-radius:4px;background:#ffffff1f}
.st-prog span{position:absolute;inset-block:15px;inset-inline-start:0;border-radius:4px;background:var(--gold);width:0}
.st-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:74px;text-align:left;direction:ltr}
.st-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.st-tools .st-btn{min-height:36px;padding:0 12px;font-size:13px}
details.st-more{margin-top:8px}
details.st-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #ffffff2a;font-size:14px;font-weight:700;color:var(--gold2)}
details.st-more summary::-webkit-details-marker{display:none}
details.st-more summary::after{content:'▾';font-size:12px}
details.st-more[open] summary::after{content:'▴'}
.st-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.st-files a{font-size:13px;color:var(--gold2);border-bottom:1px solid #dfb76855;padding:4px 0;margin-inline-end:10px}
.st-pending{grid-column:1/-1;padding:16px;border-radius:16px;border:1px dashed #dfb76866;background:linear-gradient(90deg,#dfb76808,#dfb7681a,#dfb76808);background-size:200% 100%;animation:st-shimmer 2.4s linear infinite;color:#efe3c8;font-size:14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.st-pending.failed{animation:none;border-color:#ff8f8f66;background:#ff8f8f0d;color:#ffd0d0}
@keyframes st-shimmer{to{background-position:-200% 0}}
.st-empty{color:var(--muted);text-align:center;padding:28px;border:1px dashed #ffffff26;border-radius:18px}
.st-upload{margin-top:16px;padding:18px}
/* pricing */
.st-plans{padding-block:70px;scroll-margin-top:96px}
.st-plan-grid{display:grid;gap:14px}
.st-plan{position:relative;padding:24px;display:flex;flex-direction:column;gap:10px}
.st-plan.best{border-color:#dfb768aa;box-shadow:0 0 0 1px #dfb76866,0 30px 80px -40px #dfb76866}
.st-plan .tag{position:absolute;top:-12px;inset-inline-start:20px;background:var(--gold);color:#1a1407;font-weight:800;font-size:12px;padding:5px 12px;border-radius:999px}
.st-plan h3{font-size:20px}
.st-price{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1}
.st-price small{font-size:15px;color:var(--muted);font-weight:400;letter-spacing:0}
.st-plan ul{margin:6px 0 10px;padding-inline-start:18px;color:#d5dde1;line-height:1.9;font-size:15px}
.st-plan .st-btn{margin-top:auto;width:100%}
.st-free{margin-top:16px;color:var(--muted);text-align:center;font-size:15px}
.st-launch{color:var(--gold2);border:1px dashed #dfb76866;border-radius:14px;padding:12px 16px;max-width:720px;margin-inline:auto}
.st-faq{padding-block:20px 80px}
.st-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.st-faq summary{cursor:pointer;font-weight:700;font-size:17px}
.st-faq p{color:var(--muted);margin:10px 0 0}
/* dialogs */
dialog.st-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid #ffffff22;border-radius:22px;background:var(--panel);color:var(--white);padding:0;overflow:auto}
dialog.st-dialog::backdrop{background:#020610cc;backdrop-filter:blur(4px)}
.st-dialog form{padding:22px}
.st-dialog h3{font-size:20px;margin-bottom:8px}
.st-dialog .acts{display:flex;gap:10px;justify-content:flex-start;margin-top:14px;flex-wrap:wrap}
.st-karaoke{padding:24px 20px 30px;text-align:center}
.st-karaoke .lines{display:grid;gap:14px;margin:18px 0;max-height:52vh;overflow:auto}
.st-karaoke .line{font-size:clamp(20px,4.6vw,28px);line-height:1.6;color:#ffffff55;transition:color .2s}
.st-karaoke .line.now{color:var(--white)}
.st-karaoke .w.sung{color:var(--gold2)}
.st-toast{position:fixed;inset-inline:16px;bottom:18px;z-index:60;max-width:520px;margin:0 auto;padding:14px 18px;border-radius:14px;background:#10213a;border:1px solid #dfb76866;box-shadow:0 20px 50px -20px #000;font-size:15px;transform:translateY(140%);transition:transform .35s ease}
.st-toast.show{transform:none}
.st-toast.err{border-color:#ff8f8f88}
.st-terms{padding-block:10px 60px;color:var(--muted);font-size:14px;line-height:1.8}
.st-terms h2{font-size:22px;color:var(--white);margin-bottom:8px}
[hidden]{display:none!important}
@media (min-width:720px){
  .st-steps ol{grid-template-columns:repeat(3,1fr)}
  .st-row2{grid-template-columns:1fr 1fr}
  .st-plan-grid{grid-template-columns:repeat(2,1fr)}
  .st-tracks{grid-template-columns:1fr 1fr}
}
@media (min-width:1060px){
  .st-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
  .st-chat{position:sticky;top:110px}
  .st-plan-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:719px){
  .st-hero{min-height:auto;padding-block:36px 24px}
  .st-cta .st-btn{flex:1 1 100%}
  .st-bar{padding:12px 14px}
  .st-bar .acts{width:100%}
  .st-bar .acts .st-btn{flex:1}
  .st-chat{min-height:440px;max-height:70vh}
  .st-input,.st-select{padding-block:10px;min-height:44px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .st-steps li{opacity:1;transform:none}
}

.st-hero .lead,.st-sub,.st-proof p,.st-terms p{max-width:66ch}
.st-forgot{margin:2px 0 0;color:var(--muted);font-size:14px;line-height:1.7}