@font-face{font-family:"Playfair Display";src:url(fonts/PlayfairDisplay-VariableFont_wght.ttf);font-weight:400 900}
@font-face{font-family:"Playfair Display";font-style:italic;src:url(fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf);font-weight:400 900}
@font-face{font-family:"Cinzel";src:url(fonts/Cinzel-VariableFont_wght.ttf);font-weight:400 900}
@font-face{font-family:"Montserrat";src:url(fonts/Montserrat-VariableFont_wght.ttf);font-weight:100 900}
*{box-sizing:border-box}body{margin:0;font-family:Montserrat,system-ui,sans-serif;background:#111;color:#eee;-webkit-text-size-adjust:100%}
header{padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));background:#000;border-bottom:2px solid #c8102e;display:flex;flex-direction:column}
header span{font-size:12px;color:#aaa}main{display:flex;flex-wrap:wrap;gap:14px;padding:12px}
#stage{flex:1 1 420px;max-width:620px}#canvasWrap{width:100%;background:#222;border-radius:8px;overflow:hidden}
#canvasWrap .canvas-container,#canvasWrap canvas{width:100%!important;height:auto!important}
#panel{flex:1 1 320px;max-width:520px}details{background:#1c1c1c;border-radius:10px;padding:10px 12px;margin-bottom:10px}
summary{font-weight:700;font-size:15px;padding:4px 0;cursor:pointer}label{display:block;font-size:13px;margin:8px 0;color:#ccc}
input,select{width:100%;font-size:16px;padding:10px;border-radius:8px;border:1px solid #444;background:#0c0c0c;color:#fff;margin-top:4px}
input[type=range]{padding:0}button,.filebtn{font-size:15px;padding:12px 14px;border-radius:10px;border:0;background:#c8102e;color:#fff;font-weight:700;min-height:44px;cursor:pointer;display:inline-block;text-align:center}
.filebtn input{display:none}button.ghost{background:#333}button.gold{background:#d4a017;color:#000}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.btns>*{flex:1 1 40%}.hint{font-size:12px;color:#999}
#status{font-size:13px;margin:8px 0;color:#9f9}#qc{font-size:12px;color:#fc6}
.ver{display:flex;gap:8px;align-items:center;border-top:1px solid #333;padding:8px 0;font-size:12px}.ver img{width:56px;border-radius:4px;background:#fff}
.ver .meta{flex:1}.ver button{padding:8px 10px;min-height:36px;font-size:13px}.ver input{width:22px;height:22px}
.badge{background:#d4a017;color:#000;border-radius:4px;padding:1px 5px;font-weight:700}
.prow{display:flex;gap:6px}.prow input:first-child{flex:2}.prow input:last-child{flex:1}
#cmp{position:fixed;inset:0;background:#000d;z-index:9;overflow:auto;padding:14px}.cmpbox{max-width:1100px;margin:auto}
#cmpBody{display:flex;gap:10px;margin-top:10px}#cmpBody figure{flex:1;margin:0}#cmpBody img{width:100%;background:#fff}#cmpBody figcaption{font-size:12px}
.diff{font-size:12px;color:#fc6;margin-top:8px}