:root{--bg:#120f18;--panel:#1e1725;--line:#44384e;--text:#f8f3f8;--muted:#bdb0c5;--accent:#efadd6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Arial,'Noto Sans TC',sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button,a,input{touch-action:manipulation}header{display:flex;align-items:center;gap:30px;height:86px;padding:0 5%;border-bottom:1px solid var(--line)}.brand{font-size:25px;letter-spacing:3px;font-weight:bold;white-space:nowrap}.brand span{font-size:14px;font-weight:normal;letter-spacing:1px;margin-left:8px}.header-name{font-size:12px;letter-spacing:2px;color:var(--muted)}.textlink{margin-left:auto;font-size:14px;border-bottom:1px solid var(--muted)}main{display:grid;grid-template-columns:1fr 1fr;max-width:1240px;margin:auto}.editor{padding:46px 60px 48px 36px}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--accent)}h1{font:500 36px/1.4 Georgia,'Noto Serif TC',serif;letter-spacing:2px;margin:12px 0}h2{font-size:20px;line-height:1.5;font-weight:500}p{margin:8px 0}.intro{color:var(--muted);margin-bottom:30px}fieldset{border:0;padding:0;margin:26px 0}legend{margin-bottom:14px;font-size:16px}legend>span{font:13px monospace;color:var(--accent);margin-right:10px}legend small{font-size:13px;color:var(--muted);margin-left:6px}.songs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.song{position:relative;border:1px solid var(--line);border-radius:3px;padding:14px 12px;cursor:pointer;display:block;min-height:82px;background:var(--panel)}.song:has(input:checked){border-color:var(--accent);background:#342136}.song input{position:absolute;right:12px;top:18px;accent-color:var(--accent);width:15px;height:15px;margin:0}.song strong{display:block;font-size:16px;font-weight:500;padding-right:24px}.song small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.upload{display:flex;gap:16px;align-items:center;border:1px dashed #8a6e95;background:var(--panel);padding:18px;width:100%;color:var(--text);text-align:left;min-height:90px;border-radius:3px}.upload-plus{font-size:30px;line-height:1;color:var(--accent)}.upload strong{display:block;font-size:16px;font-weight:500}.upload small{font-size:12px;color:var(--muted)}.photo-controls{display:flex;gap:10px}.smallbutton{background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--muted);padding:9px 12px;font-size:14px;min-height:44px;white-space:nowrap}.hint{color:var(--muted);font-size:12px;line-height:1.7;margin-top:10px}label{font-size:14px}#crop{padding:10px 0}#crop label{display:block;color:var(--muted);margin:8px 0 4px}input[type=range]{width:100%;accent-color:var(--accent);min-height:30px}textarea{background:var(--panel);border:1px solid var(--line);color:var(--text);padding:16px;resize:vertical;border-radius:3px;width:100%;line-height:1.8;min-height:120px}.under-input{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-top:6px}.textbutton{background:transparent;border:0;color:var(--accent);padding:8px 0;font-size:14px;min-height:44px}.formats{display:flex;gap:10px}.formats label{background:var(--panel);border:1px solid var(--line);border-radius:3px;display:flex;align-items:center;gap:8px;padding:12px;flex:1;cursor:pointer}.formats label:has(input:checked){border-color:var(--accent)}.formats input{accent-color:var(--accent)}.primary,.secondary{border:1px solid var(--line);border-radius:3px;min-height:52px;padding:14px 18px;font-weight:500}.primary{background:var(--accent);color:#241525;border-color:var(--accent)}.secondary{background:transparent;color:var(--text)}button:disabled{opacity:.5;cursor:not-allowed}.previewbutton{width:100%}.preview-panel{background:#1a1421;border-left:1px solid var(--line);padding:38px 38px 32px;align-self:start}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}.preview-head .hint{margin:0}.canvas-wrap{max-width:330px;margin:auto;background:#30253d;box-shadow:0 18px 60px #0007;line-height:0}canvas{width:100%;height:auto;display:block}.preview-caption{text-align:center;font-size:12px;color:var(--muted);margin:14px 0;min-height:20px}.export-actions{display:grid;grid-template-columns:1.3fr 1fr;gap:10px}.copybutton{display:block;margin:8px auto;text-align:center}.sharehint{max-width:390px;text-align:center;margin:8px auto 25px}.music{border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.music h2{margin:0 0 6px}.music p{font-size:14px;color:var(--muted)}.platforms{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.platforms a{padding:9px 13px;border:1px solid #685470;border-radius:3px;font-size:14px;min-height:44px}.platforms a:hover{border-color:var(--accent)}footer{padding:24px 5%;display:flex;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:12px}#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:4px;max-width:90%;font-size:14px}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px;padding:22px;max-width:min(90vw,450px);max-height:85vh;overflow:auto}dialog::backdrop{background:#000a}dialog img{width:100%;display:block}dialog button{margin-bottom:12px}dialog p{font-size:14px;color:var(--muted)}#copyDialog textarea{margin:12px 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}.guide{display:block;max-width:800px;padding:45px 24px}.guide h2{margin-top:34px}.guide p,.guide li{color:var(--muted)}.guide a{color:var(--accent)}@media(max-width:760px){header{height:72px;padding:0 22px;gap:10px}.brand{font-size:22px}.brand span{font-size:12px;margin-left:4px}.header-name{display:none}.textlink{font-size:13px}main{display:block}.editor{padding:28px 22px}.editor h1{font-size:30px}.intro{font-size:15px;margin-bottom:22px}fieldset{margin:22px 0}.preview-panel{border-left:0;border-top:1px solid var(--line);padding:26px 22px}.preview-head{gap:5px;flex-wrap:wrap}.canvas-wrap{max-width:300px}.export-actions button{padding:14px 10px;font-size:15px}footer{padding:20px 22px}footer span:last-child{display:none}.guide{padding:24px 22px}}@media(min-width:761px){.previewbutton{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

select{font:inherit;width:100%;padding:14px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--text);min-height:52px}.canvas-wrap.landscape{max-width:100%}