/* VOCAL.zip · Glass Studio UI v0.4 */
:root{color-scheme:dark;--ink:#f8f7ff;--muted:#b9b8d2;--border:rgba(255,255,255,.16);--glass:rgba(28,29,62,.53);--glass-deep:rgba(20,21,49,.76);--violet:#a78bfa;--pink:#f3a8da;--aqua:#8be8e1;--shadow:0 22px 70px rgba(3,3,21,.29);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:#0a0b1d;color:var(--ink)}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{min-height:100vh;min-height:100dvh;margin:0;background:radial-gradient(ellipse 65% 38% at 4% 0%,rgba(123,92,231,.27),transparent 75%),radial-gradient(ellipse 65% 40% at 96% 35%,rgba(34,175,177,.14),transparent 75%),linear-gradient(155deg,#0c0c25 0%,#13132e 44%,#080c1b 100%);color:var(--ink);isolation:isolate}
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:-1;border-radius:50%;filter:blur(75px);opacity:.6}
body::before{width:380px;height:380px;background:rgba(156,94,240,.19);top:15vh;left:-180px}
body::after{width:400px;height:400px;background:rgba(61,208,209,.10);right:-220px;bottom:10vh}
.app{max-width:940px;margin:0 auto;padding:34px 30px 120px}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 26px;padding:4px 2px}
.top h1{font-size:clamp(26px,4vw,36px);letter-spacing:-1.8px;line-height:1.1;font-weight:850;color:#fff}
.top h1 span{color:var(--pink)!important}
.top .muted{font-size:12px;letter-spacing:.04em;color:#c4c0db;margin-top:8px}
.tag{font-size:11px;font-weight:750;letter-spacing:.08em;color:#e8dfff;background:rgba(167,139,250,.18);border:1px solid rgba(192,174,255,.35);border-radius:100px;padding:9px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;position:sticky;top:14px;z-index:15;background:rgba(25,25,53,.62);border:1px solid rgba(255,255,255,.15);border-radius:20px;padding:7px;margin:0 0 24px;box-shadow:0 12px 32px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(26px) saturate(150%);backdrop-filter:blur(26px) saturate(150%)}
.nav button{min-height:47px;padding:12px 8px;background:transparent;color:#c4c0db;border:1px solid transparent;border-radius:14px;font-size:13px;font-weight:750;letter-spacing:-.03em;transition:background .2s,color .2s,transform .2s}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.nav button.active{background:linear-gradient(125deg,rgba(181,150,255,.34),rgba(115,93,214,.31));color:#fff;border-color:rgba(210,195,255,.27);box-shadow:0 4px 20px rgba(101,67,208,.15),inset 0 1px 0 rgba(255,255,255,.16)}
section{display:none;animation:vzipEnter .34s ease both}
section.active{display:block}
@keyframes vzipEnter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.hero{position:relative;min-height:275px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:15px;padding:35px 34px;margin:0 0 22px;border:1px solid rgba(230,216,255,.23);border-radius:28px;background:linear-gradient(125deg,rgba(124,96,215,.42),rgba(52,44,105,.57) 49%,rgba(25,77,100,.4));box-shadow:0 26px 65px rgba(2,2,20,.23),inset 0 1px 0 rgba(255,255,255,.16);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.hero::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(225,167,241,.24),transparent 70%);top:-190px;right:12%;pointer-events:none}
.hero-eyebrow{font-size:11px;letter-spacing:.22em;font-weight:800;color:#b8f0eb;margin-bottom:18px}
.hero h2{font-size:clamp(30px,4.7vw,46px);line-height:1.21;letter-spacing:-2.3px;margin:0 0 13px;color:#fff;font-weight:850}
.hero h2 em{font-style:normal;background:linear-gradient(100deg,#e7c3ff,#a3f4ef);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:14px;line-height:1.75;color:#e2dcf3;margin:0 0 20px;max-width:390px}
.hero-actions{display:flex;gap:9px;flex-wrap:wrap}
.hero-actions button{border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:11px 15px;font-size:13px;font-weight:750;cursor:pointer}
.hero-actions .primary{background:#f1eaff;color:#302355;box-shadow:0 8px 25px rgba(12,7,35,.2)}
.hero-actions .ghost{background:rgba(255,255,255,.1);color:#fff}
.hero-wave{height:170px;display:flex;align-items:center;justify-content:center;gap:7px;transform:rotate(-7deg);filter:drop-shadow(0 0 18px rgba(196,162,255,.36))}
.hero-wave i{display:block;width:8px;border-radius:99px;background:linear-gradient(180deg,#c6f7ef 0%,#c1a5ff 50%,#f6c3e2 100%);height:var(--h);opacity:var(--o,1);box-shadow:0 0 12px rgba(188,171,255,.26)}
.card{position:relative;background:var(--glass);border:1px solid var(--border);border-radius:23px;padding:24px;margin:16px 0;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.09);-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%)}
.card h2{font-size:18px;line-height:1.35;letter-spacing:-.55px;color:#fff;font-weight:800;margin:0 0 18px}
.card h2::before{content:"";display:inline-block;width:5px;height:16px;margin-right:10px;vertical-align:-2px;border-radius:5px;background:linear-gradient(180deg,#a4eee6,#b397ff)}
.muted,.mini{color:var(--muted);line-height:1.65}
.muted{font-size:12px}
.mini{font-size:12px}
label{color:#e3e1f3;font-size:12px;font-weight:720;letter-spacing:-.015em;margin:17px 0 7px}
input,select,textarea{font:inherit;width:100%;min-width:0;color:#f7f5ff;background:rgba(9,11,34,.4);border:1px solid rgba(212,206,255,.19);border-radius:13px;padding:12px 14px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s;box-shadow:inset 0 1px 1px rgba(0,0,0,.05)}
input::placeholder,textarea::placeholder{color:#9a98b7;opacity:1}
input:focus,select:focus,textarea:focus{border-color:rgba(182,156,255,.72);background:rgba(12,12,36,.62);box-shadow:0 0 0 3px rgba(167,139,250,.14)}
select option{background:#20203c;color:#fff}
input[type=date]{color-scheme:dark}
textarea{min-height:95px;line-height:1.65}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid #b5f0e9;outline-offset:3px}
button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.3)}
.btn{padding:12px 17px;border:1px solid rgba(216,197,255,.28);border-radius:12px;background:linear-gradient(120deg,#9777ef,#7463d9);color:#fff;font-size:13px;font-weight:760;box-shadow:0 8px 24px rgba(89,65,188,.25),inset 0 1px 0 rgba(255,255,255,.18);transition:transform .16s,filter .16s}
.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}
.btn.secondary{background:rgba(193,173,255,.13);color:#eee6ff;border-color:rgba(210,190,255,.24);box-shadow:none}
.btn.danger{background:rgba(244,111,158,.16);color:#ffc3d5;border-color:rgba(244,111,158,.28);box-shadow:none}
.buttons,.two{gap:11px}
.buttons{margin-top:15px}
.item{border-top:1px solid rgba(255,255,255,.1);padding:15px 2px;color:#f0edff}
.itemtitle{font-weight:750}
.pill{border-radius:50px;padding:5px 10px;background:rgba(165,136,250,.18);border:1px solid rgba(188,163,255,.19);color:#e1d4ff;font-size:11px}
.smallbtn{font-size:12px;font-weight:700;border:1px solid rgba(194,174,255,.24);border-radius:10px;background:rgba(167,139,250,.13);padding:9px 11px;color:#e4d8ff}
.empty{background:rgba(9,11,34,.32);border:1px dashed rgba(220,208,255,.22);color:#bbb8d4;border-radius:15px;padding:17px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.stat{position:relative;overflow:hidden;text-align:left;background:linear-gradient(145deg,rgba(171,149,252,.17),rgba(119,100,188,.07));border:1px solid rgba(219,206,255,.15);border-radius:17px;padding:20px 18px;min-width:0}
.stat:nth-child(2){background:linear-gradient(145deg,rgba(106,212,211,.16),rgba(74,117,175,.08))}
.stat:nth-child(3){background:linear-gradient(145deg,rgba(255,171,211,.16),rgba(134,90,155,.08))}
.stat strong{display:block;font-size:35px;line-height:1.2;font-weight:850;letter-spacing:-1.5px;color:#f4e9ff;margin-bottom:7px}
.stat:nth-child(2) strong{color:#c0f8ee}.stat:nth-child(3) strong{color:#ffd6e8}
.stat .muted{font-size:12px;color:#dad5ee}
input[type=checkbox]{width:19px;height:19px;accent-color:#b49aff}
input[type=file]{padding:12px}
.footer{margin-top:32px;text-align:center;color:#a19ebd;font-size:11px;letter-spacing:.04em}
#vzip-recorder{border-color:rgba(138,232,225,.27);background:linear-gradient(140deg,rgba(29,71,82,.36),rgba(38,30,75,.58))}
#vzip-recorder .item{margin-top:18px}
#vzip-recorder .smallbtn{margin-right:4px}
#vzip-timer{align-self:center;font-variant-numeric:tabular-nums;font-size:15px;font-weight:800;color:#a7f2ea}
#vzip-live{border:1px solid rgba(255,255,255,.2);border-radius:16px}
audio,video{max-width:100%;border-radius:13px}
@media(max-width:720px){
.app{padding:24px 16px calc(120px + env(safe-area-inset-bottom,0px))}
.top{margin-bottom:20px}
.nav{position:fixed;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:12px;right:12px;margin:0 auto;max-width:600px;z-index:40;padding:7px;border-radius:22px;background:rgba(27,26,58,.8);box-shadow:0 16px 45px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.nav button{font-size:12px;padding:13px 2px;min-height:49px}
.hero{grid-template-columns:1fr 120px;min-height:250px;padding:25px 24px}
.hero h2{font-size:34px;letter-spacing:-1.8px}
.hero-wave{gap:5px;transform:rotate(-7deg) scale(.8);transform-origin:center}
.hero-wave i{width:7px}
.card{padding:20px;margin:14px 0;border-radius:21px}
}
@media(max-width:490px){
.app{padding:20px 14px calc(115px + env(safe-area-inset-bottom,0px))}
.top h1{font-size:29px}.top .muted{font-size:11px}
.tag{font-size:10px;padding:8px 10px}
.hero{display:block;min-height:270px;padding:28px 24px}
.hero h2{font-size:36px;position:relative;z-index:2}
.hero p{font-size:13px;max-width:270px;position:relative;z-index:2}
.hero-actions{position:relative;z-index:2}
.hero-wave{position:absolute;right:-58px;bottom:15px;opacity:.33;transform:rotate(-7deg) scale(.8);pointer-events:none}
.card{padding:19px 17px}
.stats{gap:8px}.stat{padding:16px 10px;border-radius:14px}.stat strong{font-size:29px}.stat .muted{font-size:10px}
.two{flex-direction:column;gap:2px}
.nav button{font-size:11px;letter-spacing:-.05em}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Song archive v0.6 */
.nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.archive-timeline{position:relative;padding-left:12px}
.archive-event{display:grid;grid-template-columns:105px minmax(0,1fr);gap:16px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.11)}
.archive-event:last-child{border-bottom:0}
.archive-date{color:#c8b8fa;font-size:12px;font-weight:750;padding-top:6px}
.archive-event-body{min-width:0;line-height:1.6;overflow-wrap:anywhere}
.archive-event-body b{display:block;margin:9px 0 4px}
.archive-event-body p{white-space:pre-wrap;color:#d0cce6;font-size:13px;margin:4px 0}
#archive-player-a video,#archive-player-b video{max-height:300px}
@media(max-width:720px){.nav button{font-size:11px;padding:10px 2px}}
@media(max-width:490px){.nav{gap:2px;padding:5px}.nav button{font-size:10px;min-height:50px;padding:9px 1px}.archive-event{grid-template-columns:78px minmax(0,1fr);gap:9px}.archive-date{font-size:11px}}