style.css

html, body { height: 100%; margin: 0; background:#000; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, Arial, sans-serif; }
    #wrap { position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto; }
    #gl { width: 100%; height: 100%; display:block; }
    .ui { color:#ddd; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8)); padding: 10px 14px; display:flex; gap:16px; align-items:center; flex-wrap: wrap; }
    .ui label { font-size: 12px; opacity:.9; }
    .ui input[type=range] { width: 180px; }
    .ui button { background:#111; color:#ddd; border:1px solid #333; border-radius:10px; padding:6px 10px; cursor:pointer; }
    .ui input[type=file] { color:#ccc; }html, body { height: 100%; margin: 0; background:#000; font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, Arial, sans-serif; }
    #wrap { position: fixed; inset: 0; display: grid; grid-template-rows: 1fr auto; }
    #gl { width: 100%; height: 100%; display:block; }
    .ui { color:#ddd; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8)); padding: 10px 14px; display:flex; gap:16px; align-items:center; flex-wrap: wrap; }
    .ui label { font-size: 12px; opacity:.9; }
    .ui input[type=range] { width: 180px; }
    .ui button { background:#111; color:#ddd; border:1px solid #333; border-radius:10px; padding:6px 10px; cursor:pointer; }
    .ui input[type=file] { color:#ccc; }